/* =============================================================
   TOKENS — Sede Digital y web pública de cada ONG (PD-92)
   Único archivo de la Sede donde viven valores de color. El resto
   del CSS consume exclusivamente var(--sd-*).

   El tema lo elige la ONG en Cannis OS › Mi web y llega como dos
   atributos en <html>: data-fondo (oscuro | claro) y data-acento
   (la clave de App\Support\Ongs\Sitio\Tema::ACENTOS). Se guarda la
   clave, nunca un color: cada combinación de abajo está medida.
     · El acento como texto sobre el fondo: ≥ 4,5:1.
     · --sd-sobre-acento sobre el relleno del acento: ≥ 4,5:1.
   En oscuro el acento es claro y su tinta, casi negra; en claro, al
   revés. Por eso cada acento declara las dos versiones.
   ============================================================= */

:root {
  /* ---- Acento por defecto: la menta de Cannis ---- */
  --sd-acento-oscuro:        #3DDC97;
  --sd-sobre-acento-oscuro:  #05231A;
  --sd-acento-claro:         #0A6B53;
  --sd-sobre-acento-claro:   #FFFFFF;

  /* ---- Semáforo (igual en los dos fondos, medido sobre ambos) ---- */
  --sd-ok-oscuro:      #4ADE80;
  --sd-alerta-oscuro:  #FBBF24;
  --sd-riesgo-oscuro:  #FB7185;
  --sd-info-oscuro:    #7DB8FF;
  --sd-ok-claro:       #0F7A4F;
  --sd-alerta-claro:   #9A4A06;
  --sd-riesgo-claro:   #B4123A;
  --sd-info-claro:     #1D5FB0;

  /* ---- Tipografía y forma ---- */
  --sd-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --sd-tipo-portada: clamp(2.1rem, 1.3rem + 3.6vw, 3.6rem);
  --sd-tipo-pagina:  clamp(1.5rem, 1.15rem + 1.4vw, 1.95rem);
  --sd-tipo-seccion: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  --sd-tipo-cifra:   clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  --sd-radio:    14px;
  --sd-radio-lg: 22px;
  --sd-radio-pill: 999px;
  --sd-ancho: 1120px;
  --sd-barra-w: 264px;
  --sd-topbar-h: 64px;
  --sd-tabbar-h: 66px;
}

/* ---- Los acentos del catálogo ---- */
:root[data-acento="esmeralda"] { --sd-acento-oscuro: #34D399; --sd-sobre-acento-oscuro: #04261A; --sd-acento-claro: #047857; --sd-sobre-acento-claro: #FFFFFF; }
:root[data-acento="aqua"]      { --sd-acento-oscuro: #2DD4BF; --sd-sobre-acento-oscuro: #042F2B; --sd-acento-claro: #0F766E; --sd-sobre-acento-claro: #FFFFFF; }
:root[data-acento="cielo"]     { --sd-acento-oscuro: #7DB8FF; --sd-sobre-acento-oscuro: #071A33; --sd-acento-claro: #1D4ED8; --sd-sobre-acento-claro: #FFFFFF; }
:root[data-acento="violeta"]   { --sd-acento-oscuro: #B8A2FF; --sd-sobre-acento-oscuro: #1B0F3D; --sd-acento-claro: #6D28D9; --sd-sobre-acento-claro: #FFFFFF; }
:root[data-acento="ambar"]     { --sd-acento-oscuro: #FBBF24; --sd-sobre-acento-oscuro: #2A1A00; --sd-acento-claro: #A14D05; --sd-sobre-acento-claro: #FFFFFF; }
:root[data-acento="coral"]     { --sd-acento-oscuro: #FF8A9B; --sd-sobre-acento-oscuro: #3A0A14; --sd-acento-claro: #BE123C; --sd-sobre-acento-claro: #FFFFFF; }
:root[data-acento="tierra"]    { --sd-acento-oscuro: #E0B48A; --sd-sobre-acento-oscuro: #2A1A0C; --sd-acento-claro: #8A5A2B; --sd-sobre-acento-claro: #FFFFFF; }

/* ---- Fondo oscuro (el de Cannis, por defecto) ---- */
:root,
:root[data-fondo="oscuro"] {
  --sd-acento:        var(--sd-acento-oscuro);
  --sd-sobre-acento:  var(--sd-sobre-acento-oscuro);
  --sd-acento-tinte:  color-mix(in srgb, var(--sd-acento-oscuro) 14%, transparent);
  --sd-acento-anillo: color-mix(in srgb, var(--sd-acento-oscuro) 40%, transparent);
  --sd-acento-luz:    color-mix(in srgb, var(--sd-acento-oscuro) 22%, transparent);

  --sd-lienzo:      #0A1210;
  --sd-lienzo-alto: #0E1915;
  --sd-superficie:  #121D19;
  --sd-superficie-2:#182520;
  --sd-superficie-3:#1F2E28;
  --sd-tinta:        #ECF3F0;
  --sd-tinta-suave:  rgba(236, 243, 240, 0.80);
  --sd-tinta-tenue:  rgba(236, 243, 240, 0.64);
  --sd-tinta-fantasma: rgba(236, 243, 240, 0.40);
  --sd-borde:        rgba(236, 243, 240, 0.10);
  --sd-borde-fuerte: rgba(236, 243, 240, 0.22);
  --sd-campo:        #0D1714;
  --sd-velo:         rgba(3, 8, 6, 0.70);
  --sd-topbar-fondo: rgba(10, 18, 16, 0.82);

  --sd-ok: var(--sd-ok-oscuro);
  --sd-alerta: var(--sd-alerta-oscuro);
  --sd-riesgo: var(--sd-riesgo-oscuro);
  --sd-info: var(--sd-info-oscuro);
  --sd-ok-suave:     rgba(74, 222, 128, 0.12);
  --sd-alerta-suave: rgba(251, 191, 36, 0.12);
  --sd-riesgo-suave: rgba(251, 113, 133, 0.12);
  --sd-info-suave:   rgba(125, 184, 255, 0.12);

  --sd-sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 14px rgba(0, 0, 0, 0.22);
  --sd-sombra-md: 0 2px 6px rgba(0, 0, 0, 0.30), 0 16px 36px rgba(0, 0, 0, 0.30);
  --sd-trama: rgba(236, 243, 240, 0.035);

  color-scheme: dark;
}

/* ---- Fondo claro ---- */
:root[data-fondo="claro"] {
  --sd-acento:        var(--sd-acento-claro);
  --sd-sobre-acento:  var(--sd-sobre-acento-claro);
  --sd-acento-tinte:  color-mix(in srgb, var(--sd-acento-claro) 10%, transparent);
  --sd-acento-anillo: color-mix(in srgb, var(--sd-acento-claro) 32%, transparent);
  --sd-acento-luz:    color-mix(in srgb, var(--sd-acento-claro) 14%, transparent);

  --sd-lienzo:      #F1F5F3;
  --sd-lienzo-alto: #E8EFEC;
  --sd-superficie:  #FFFFFF;
  --sd-superficie-2:#F7FAF9;
  --sd-superficie-3:#EEF3F1;
  --sd-tinta:        #13201B;
  --sd-tinta-suave:  rgba(19, 32, 27, 0.80);
  --sd-tinta-tenue:  rgba(19, 32, 27, 0.66);
  --sd-tinta-fantasma: rgba(19, 32, 27, 0.42);
  --sd-borde:        rgba(19, 32, 27, 0.11);
  --sd-borde-fuerte: rgba(19, 32, 27, 0.26);
  --sd-campo:        #FFFFFF;
  --sd-velo:         rgba(19, 32, 27, 0.55);
  --sd-topbar-fondo: rgba(241, 245, 243, 0.86);

  --sd-ok: var(--sd-ok-claro);
  --sd-alerta: var(--sd-alerta-claro);
  --sd-riesgo: var(--sd-riesgo-claro);
  --sd-info: var(--sd-info-claro);
  --sd-ok-suave:     #E5F4EC;
  --sd-alerta-suave: #FBEFDF;
  --sd-riesgo-suave: #FCE8ED;
  --sd-info-suave:   #E6EFFA;

  --sd-sombra-sm: 0 1px 2px rgba(19, 32, 27, 0.05), 0 4px 12px rgba(19, 32, 27, 0.06);
  --sd-sombra-md: 0 2px 4px rgba(19, 32, 27, 0.05), 0 14px 32px rgba(19, 32, 27, 0.10);
  --sd-trama: rgba(19, 32, 27, 0.035);

  color-scheme: light;
}

/* ---- QR de retiro (PD-92, éxito y detalle de la dispensa) ----
   El PNG del QR sale sin margen (DispensacionQrService, size 300): el lector
   necesita una zona blanca alrededor para leerlo, en los dos fondos. */
:root { --sd-qr-fondo: #FFFFFF; }