/* ============================================================
   Variables de tema (modo claro / oscuro)
   Reunión y Atención a Padres — ITS Pereira

   Paleta INSTITUCIONAL: verdes + blanco + negro.
   Derivada del sistema de itsinformatica (Claymorphism sobre base
   flat), re-teñida a verde primario. Acentos secundarios por jornada:
   AM = verde-azulado (teal), PM = verde-oliva.

   Los tokens semánticos (--color-*) son los que usa styles.css;
   la paleta cruda solo se referencia desde aquí.

   Contrastes verificados WCAG 2.1 AA (texto ≥4.5:1, componentes ≥3:1).
   Calculados con la fórmula de luminancia relativa de WCAG.
   ============================================================ */

:root {
    /* Paleta institucional cruda */
    --verde-escudo: #008f39;   /* 4.21:1 sobre blanco → componentes/iconos, NO texto */
    --verde-oscuro: #00702d;   /* 6.26:1 sobre blanco → apto como texto */
    --am-crudo: #00796b;       /* teal */
    --pm-crudo: #6d6410;       /* oliva */

    /* Tokens semánticos — MODO CLARO */
    --color-fondo: #f3f8f4;
    --color-superficie: #ffffff;
    --color-superficie-alt: #e3f2e8;
    --color-texto: #14201a;            /* 15.62:1 sobre fondo */
    --color-texto-suave: #44544a;      /* 7.48:1 sobre fondo */
    --color-enlace: #00702d;           /* 5.82:1 sobre fondo / 6.26:1 sobre blanco */
    --color-acento: var(--verde-escudo);
    --color-acento-fuerte: var(--verde-oscuro);
    --color-verde-texto: #00702d;      /* 6.26:1 sobre blanco */
    --color-verde-acento: var(--verde-escudo);
    --color-borde: #cfe3d6;
    --color-foco: var(--verde-oscuro);

    /* Puente hacia Bootstrap */
    --bs-body-bg: var(--color-fondo);
    --bs-body-color: var(--color-texto);
    --bs-link-color: var(--color-enlace);
    --bs-link-hover-color: var(--color-acento-fuerte);

    /* --- Acentos por jornada (componentes ≥3:1, texto ≥4.5:1) --- */
    --am: #00796b;          /* 5.32:1 — sirve como texto */
    --am-texto: #00695c;    /* 6.61:1 */
    --pm: #6d6410;          /* 6.03:1 — sirve como texto */
    --pm-texto: #6d6410;    /* 6.03:1 */

    /* --- Duotonos planos (acento ~12% sobre blanco, precalculados;
           texto #14201a sobre cada tinte ≥14:1) --- */
    --duo-verde: #e0f2e7;   /* texto #14201a = 14.4:1 */
    --duo-am: #e0efed;      /* texto #14201a = 14.2:1 */
    --duo-pm: #eeece2;      /* texto #14201a = 14.3:1 */

    /* --- Tipografía display (tamaño fluido móvil → escritorio) --- */
    --texto-display-1: clamp(2.1rem, 1.2rem + 3.5vw, 3.4rem);
    --texto-display-2: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem);
    --texto-dato: clamp(1.8rem, 1.3rem + 2vw, 2.6rem);   /* cifras destacadas */
    --texto-reloj: clamp(3rem, 1.2rem + 11vw, 8rem);     /* el reloj protagonista (FASE 3) */
    --peso-display: 800;
    --interletra-display: -0.02em;

    /* --- Claymorphism ---
       Sombra exterior teñida de verde (decorativa) + doble inset que da el
       volumen de arcilla. Borde transparente en claro: el volumen lo dan
       las sombras. */
    --radio-clay: 1.75rem;
    --radio-clay-chico: 1rem;
    --sombra-clay:
        0 10px 26px rgba(0, 143, 57, 0.14),
        inset 2px 2px 6px rgba(255, 255, 255, 0.9),
        inset -3px -3px 8px rgba(0, 143, 57, 0.08);
    --sombra-clay-hundida:
        0 4px 12px rgba(0, 143, 57, 0.10),
        inset 3px 3px 8px rgba(0, 143, 57, 0.12),
        inset -2px -2px 6px rgba(255, 255, 255, 0.7);
    --borde-clay: 1px solid transparent;
    /* Tintes para teñir la sombra exterior por jornada */
    --tinte-sombra-verde: rgba(0, 143, 57, 0.18);
    --tinte-sombra-am: rgba(0, 121, 107, 0.18);
    --tinte-sombra-pm: rgba(109, 100, 16, 0.18);

    /* --- Movimiento (toda animación usa estos tokens) --- */
    --duracion-rapida: 150ms;
    --duracion-media: 320ms;
    --curva-arcilla: cubic-bezier(0.34, 1.4, 0.64, 1); /* rebote blando */
}

[data-bs-theme="dark"] {
    /* Tokens semánticos — MODO OSCURO (superficie #15201a) */
    --color-fondo: #0d140f;
    --color-superficie: #15201a;
    --color-superficie-alt: #1b2a21;
    --color-texto: #e6f1ea;            /* 14.47:1 sobre superficie */
    --color-texto-suave: #a6b8ad;      /* 8.04:1 sobre superficie */
    --color-enlace: #3fd06c;           /* 8.34:1 sobre superficie */
    --color-acento: #3fd06c;
    --color-acento-fuerte: #6fe08f;    /* 10.16:1 sobre superficie */
    --color-verde-texto: #3fd06c;      /* 8.34:1 */
    --color-verde-acento: #3fd06c;
    --color-borde: #2a3b30;
    --color-foco: #3fd06c;

    --bs-body-bg: var(--color-fondo);
    --bs-body-color: var(--color-texto);
    --bs-link-color: var(--color-enlace);
    --bs-link-hover-color: var(--color-acento-fuerte);

    /* --- Acentos por jornada (todos sirven como texto: ≥6.8:1) --- */
    --am: #4db6ac;          /* 6.86:1 */
    --am-texto: #4db6ac;
    --pm: #c0ca33;          /* 9.36:1 */
    --pm-texto: #c0ca33;

    /* --- Duotonos (acento ~15% sobre #15201a, precalculados;
           texto #e6f1ea sobre cada tinte ≥10.4:1) --- */
    --duo-verde: #1b3a26;   /* texto #e6f1ea = 10.8:1 */
    --duo-am: #1d3730;      /* texto #e6f1ea = 11.0:1 */
    --duo-pm: #2f3a1e;      /* texto #e6f1ea = 10.4:1 */

    /* --- Claymorphism en oscuro ---
       La sombra exterior no se percibe sobre fondo oscuro: el volumen
       sale de las dos inset + un borde 1px más claro que la superficie. */
    --sombra-clay:
        0 8px 20px rgba(0, 0, 0, 0.35),
        inset 2px 2px 6px rgba(230, 241, 234, 0.07),
        inset -3px -3px 8px rgba(0, 0, 0, 0.45);
    --sombra-clay-hundida:
        0 3px 10px rgba(0, 0, 0, 0.3),
        inset 3px 3px 8px rgba(0, 0, 0, 0.5),
        inset -2px -2px 6px rgba(230, 241, 234, 0.05);
    --borde-clay: 1px solid #2f4438; /* volumen perceptible sin sombra */
    --tinte-sombra-verde: rgba(0, 0, 0, 0.35);
    --tinte-sombra-am: rgba(0, 0, 0, 0.35);
    --tinte-sombra-pm: rgba(0, 0, 0, 0.35);
}