/* =========================================================================
   SOPHIA STEM · Design Tokens
   Fuente única de verdad para color, tipografía, espacio, radios y sombras.
   Cambiar aquí = cambia todo el sitio.
   ========================================================================= */

:root {
  /* ---- Marca ---------------------------------------------------------- */
  --navy-900: #131C4E;
  --navy-800: #1B2560;
  --navy-700: #212D73;   /* color principal de titulares */
  --navy-600: #2E3C93;
  --navy-400: #6975B8;
  --navy-200: #C3CAE6;

  --yellow-600: #D9A400;
  --yellow-500: #FFC629;  /* CTA principal */
  --yellow-400: #FFD35C;

  /* Tonos solo para texto. Los de arriba están pensados para fondos, franjas e
     iconos; sobre blanco o sobre sus propios tintes no llegan a 4,5:1, y una
     página de venta no puede tener las etiquetas ni los precios a medio leer.
     Medidos sobre cada fondo donde se usan. */
  --gold-text: #8A6B00;       /* 5,02:1 en blanco · 4,54:1 sobre --yellow-100 */
  --gold-display: #B37F00;    /* 3,53:1 en blanco · solo para texto grande     */
  --teal-text: #17606F;       /* 7,14:1 en blanco · 6,03:1 sobre --teal-100    */
  --magenta-text: #8E1F51;    /* 8,52:1 en blanco · 6,73:1 sobre --magenta-100 */
  --yellow-100: #FFF3D0;
  --yellow-050: #FFF9E8;  /* fondo tarjeta académico */

  --orange-700: #B34A0A;   /* naranja legible en texto pequeño: AA sobre blanco y sobre el vídeo */
  --orange-600: #C4530C;
  --orange-500: #E2650F;  /* eyebrows, acentos */
  --orange-100: #FCE3CE;

  --teal-600: #1F7F94;
  --teal-500: #2A9DB5;    /* Sophia Recreacional */
  --teal-100: #D9F0F5;
  --teal-050: #F0FAFC;

  --purple-600: #6438A8;
  --purple-500: #7A4FC0;  /* Abacus Math */
  --purple-100: #EADFF9;

  --magenta-500: #C2367A; /* AACC */
  --magenta-100: #FADDEA;

  --green-500: #2F9E63;   /* estados / check */
  --green-100: #D8F2E4;

  /* ---- Neutrales ------------------------------------------------------ */
  --ink-900: #10162F;
  --ink-700: #3A4260;
  --ink-500: #626B8A;
  --ink-400: #8B93AE;
  --ink-200: #D7DCEA;
  --ink-100: #E9EDF7;
  --paper: #FFFFFF;
  --paper-tint: #F5F8FE;   /* fondo azulado suave */
  --paper-cream: #FFFBF0;

  /* ---- Semánticos · TEMA CLARO ----------------------------------------
     Todo lo que cambia entre modo día y modo noche vive aquí. El resto del
     CSS solo usa estos nombres, nunca un color literal.
     -------------------------------------------------------------------- */
  --bg: #FFFFFF;              /* fondo de página */
  --bg-alt: #F5F8FE;          /* secciones alternas */
  --bg-cream: #FFFBF0;        /* secciones cálidas */
  --surface: #FFFFFF;         /* tarjetas */
  --surface-2: #F5F8FE;       /* rellenos suaves: iconos, cajas de cadencia */
  --surface-3: #FFFFFF;       /* píldoras */
  --surface-glass: rgba(255, 255, 255, 0.86);   /* cabecera translúcida */
  --band: #1B2560;            /* franjas navy (cifras, CTA, pie) */
  --band-text: #C3CAE6;
  --footer-bg: #131C4E;
  --footer-muted: #98A2CC;   /* el pie es oscuro en los dos temas */

  --text: #3A4260;
  --text-muted: #626B8A;
  --text-faint: #5F6889;
  --heading: #212D73;

  --border: #E9EDF7;
  --border-strong: #D7DCEA;

  --accent: #E2650F;
  --accent-label: #B34A0A;    /* etiquetas pequeñas en mayúsculas: AA */
  --cta: #FFC629;
  --cta-fg: #1B2560;
  --link: #2E3C93;

  /* Capas del hero sobre el vídeo */
  --veil-rgb: 247, 250, 255;   /* velo de legibilidad del hero */
  --page-rgb: 255, 255, 255;   /* fondo de página: al que funden los vídeos */
  --hero-bg-a: #FFFDF6;
  --hero-bg-b: #F7FAFF;
  --scene-a: #FFFFFF;           /* fondo de los lienzos 3D */
  --scene-b: #F2F6FF;
  --scene-c: #E9F0FC;

  --shadow-rgb: 19, 28, 78;
  color-scheme: light;

  /* ---- Tipografía ----------------------------------------------------- */
  /* Fredoka One SOLO para títulos grandes, logo y encabezados destacados.
     Tiene un único grosor (400): no se le aplican font-weight mayores.
     Nunito para todo lo demás: menús, botones, textos y contenido. */
  --font-display: 'Fredoka One', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Escala fluida (clamp: min · fluido · max) */
  --fs-eyebrow: 0.78rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: clamp(1.125rem, 0.4vw + 1rem, 1.3125rem);
  --fs-h4: clamp(1.1rem, 0.5vw + 1rem, 1.35rem);
  --fs-h3: clamp(1.35rem, 1vw + 1rem, 1.75rem);
  --fs-h2: clamp(1.9rem, 2.4vw + 1rem, 3.1rem);
  --fs-h1: clamp(2.1rem, 2.8vw + 1rem, 3.6rem);
  --fs-hero: clamp(3rem, 8vw + 0.5rem, 7.5rem);

  --lh-tight: 1.05;
  --lh-heading: 1.18;
  --lh-body: 1.65;
  --tracking-eyebrow: 0.16em;
  --tracking-display: -0.005em;

  /* ---- Espacio (ritmo de 4px) ----------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;    --sp-20: 5rem;    --sp-24: 6rem;
  --sp-32: 8rem;

  --section-y: clamp(3.5rem, 7vw, 7rem);
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --header-h: 74px;
  --container: 1200px;
  --container-wide: 1360px;
  --measure: 62ch;

  /* ---- Formas --------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ---- Sombras (tintadas en navy, no negro) --------------------------- */
  --sh-xs: 0 1px 2px rgba(19, 28, 78, 0.06);
  --sh-sm: 0 2px 8px rgba(19, 28, 78, 0.06);
  --sh-md: 0 8px 24px rgba(19, 28, 78, 0.08);
  --sh-lg: 0 18px 48px rgba(19, 28, 78, 0.12);
  --sh-cta: 0 8px 20px rgba(217, 164, 0, 0.32);

  /* ---- Movimiento ----------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 620ms;

  /* ---- Capas ---------------------------------------------------------- */
  --z-canvas: 0;
  --z-content: 1;
  --z-header: 100;
  --z-menu: 200;
  --z-modal: 300;
}