/* ==========================================================================
   Tokens de diseño del directorio.
   Unica fuente de verdad de color, tipografia, ritmo y elevacion.

   La paleta sale del logotipo de Edutalent (magenta, baya, amarillo y teal
   oscuro) y del portal (static/css/app.css). El magenta y el baya se reparten
   el trabajo por contraste: el magenta es la capa grafica, el baya es la que
   lleva texto encima.
   ========================================================================== */

:root {
    /* --- Color -------------------------------------------------------- */
    --ink: #103840;             /* teal del logotipo: texto principal */
    --ink-soft: #4d6a70;        /* texto secundario */
    --ink-faint: #5c7276;       /* rotulos y metadatos (4.7:1 sobre papel) */

    --teal: #024751;            /* primario del portal */
    --teal-deep: #0a272e;       /* fondo de los paneles oscuros */
    --teal-soft: #e3ecec;
    --teal-tint: #f0f4f4;

    --board: #325050;           /* verde de encerado: paneles de pizarra */

    --brand: #ff2278;           /* magenta de marca */
    --brand-deep: #b71874;      /* baya: botones y texto (5.7:1 sobre papel) */
    --brand-dark: #8e1259;      /* baya al pasar por encima */
    --brand-soft: #ffe1ed;

    --sun: #f9be01;             /* amarillo de marca */
    --sun-soft: #fdf1cc;
    --sun-ink: #5c4700;         /* texto sobre amarillo */

    --paper: #f5f5f4;           /* fondo de pagina */
    --surface: #ffffff;
    --rule: #e2e2df;
    --rule-strong: #c6c6c1;

    /* --- Tipografia --------------------------------------------------- */
    --font-display: 'Figtree', 'Roboto', system-ui, sans-serif;
    --font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --fs-display: clamp(2.35rem, 1.35rem + 3.9vw, 4.25rem);
    --fs-h2: clamp(1.7rem, 1.15rem + 2.1vw, 2.6rem);
    --fs-h3: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
    --fs-lead: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem);
    --fs-body: 1rem;
    --fs-sm: 0.875rem;
    --fs-xs: 0.8125rem;
    --fs-label: 0.6875rem;

    --lh-tight: 1.02;
    --lh-snug: 1.22;
    --lh-body: 1.6;

    --tracking-display: -0.035em;
    --tracking-label: 0.13em;

    /* --- Ritmo -------------------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    --shell: 1220px;
    --shell-narrow: 880px;
    --gutter: clamp(1rem, 0.4rem + 2.4vw, 2.5rem);

    /* --- Forma -------------------------------------------------------- */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 32px;
    --r-2xl: 44px;
    --r-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(16, 56, 64, 0.06), 0 2px 8px rgba(16, 56, 64, 0.04);
    --shadow-md: 0 4px 12px rgba(16, 56, 64, 0.07), 0 12px 32px rgba(16, 56, 64, 0.06);
    --shadow-lg: 0 8px 20px rgba(16, 56, 64, 0.1), 0 28px 64px rgba(16, 56, 64, 0.12);

    /* --- Movimiento --------------------------------------------------- */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-fast: 120ms;
    --dur: 220ms;
    --dur-slow: 520ms;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur: 0ms;
        --dur-slow: 0ms;
    }
}