/* ============================================================
   Judah Christian Academy — Design Tokens
   Brand colors sampled directly from the official logo:
     orange #FF620B (lion mark) · navy #0F4C82 (wordmark)
     lime   #C4E04E (subtitle "CHRISTIAN ACADEMY")
   Every text/background pair below is annotated with its
   measured WCAG 2.1 contrast ratio.
   ============================================================ */

:root {
  /* ---------- Brand: Navy (primary / authority) ---------- */
  --c-navy-50:  #F4F8FC;
  --c-navy-100: #E4EEF7;
  --c-navy-200: #C6DBEC;
  --c-navy-300: #93BCDC;
  --c-navy-600: #1D6CA8;
  --c-navy-700: #15598F;
  --c-navy-800: #0F4C82;  /* BRAND — 8.84:1 on white */
  --c-navy-900: #0A3A63;
  --c-navy-950: #06243F;

  /* ---------- Brand: Orange (energy / action) ----------
     El naranja visible del sitio es el del logotipo: #FF620B.
     Se usa en relleno — botones, iconos, barras, pasos activos — con
     texto casi negro encima, que mide 6.07:1.
     La variante oscura queda SOLO para texto naranja pequeño sobre
     blanco (donde #FF620B daría 3.00:1) y para hover/active. */
  --c-orange-50:  #FFF4EC;
  --c-orange-100: #FFE3CE;
  --c-orange-300: #FFA463;
  --c-orange-500: #FF620B;  /* MARCA — relleno. 6.07:1 con texto #10161D */
  --c-orange-600: #E85800;  /* hover/active de relleno. 5.05:1 con #10161D */
  --c-orange-700: #CC4B00;  /* SOLO texto naranja sobre blanco. 4.59:1 */
  --c-orange-800: #A83D00;  /* hover de ese texto */
  /* Texto que va encima del naranja de relleno. */
  --on-orange: #10161D;

  /* ---------- Brand: Lime (highlight) ---------- */
  --c-lime-500: #BFD94B;  /* BRAND (Memoria 10.2) - 5.58:1 sobre #0F4C82 */
  --c-lime-700: #5C7311;  /* 5.36:1 on white — text-safe */

  /* ---------- Neutrals ---------- */
  --c-white:  #FFFFFF;
  --c-ink:    #10161D;  /* 17.4:1 on white */
  --c-body:   #3A4652;  /* 9.4:1  on white */
  --c-muted:  #5C6B7A;  /* 5.47:1 on white — smallest text still AA */
  --c-line:   #DCE3EA;
  --c-line-strong: #B9C4CF;
  --c-surface:      #FFFFFF;
  --c-surface-sunk: #F7F9FB;
  /* Memoria 10.2: "Todo fondo azul nuevo usa #0F4C82". Antes se usaba
     un azul mas oscuro (#06243F) que no esta en la paleta adoptada. */
  --surface-dark:  var(--c-navy-800);
  --scrim-dark:    rgba(6, 36, 63, .62);   /* velo para foto, derivado del azul de marca */

  /* ---------- Feedback ---------- */
  --c-error:      #B3261E;  /* 6.0:1 on white */
  --c-error-bg:   #FDECEA;
  --c-success:    #14713D;  /* 5.4:1 on white */
  --c-success-bg: #E8F5EE;
  --c-notice:     #7A4B00;  /* 6.1:1 on white */
  --c-notice-bg:  #FFF6E5;

  /* ---------- Semantic roles ---------- */
  --text-strong: var(--c-ink);
  --text-base:   var(--c-body);
  --text-subtle: var(--c-muted);
  --text-on-dark:        #FFFFFF;
  --text-on-dark-subtle: #D5E6F4;  /* 7.4:1 sobre #0F4C82 */
  --focus-ring: var(--c-orange-500);

  /* ---------- Typography ---------- */
  --font-head: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Fluid scale — min at 390px, max at 1440px */
  --fs-display: clamp(2.25rem, 1.30rem + 4.05vw, 4.25rem);
  --fs-h1:      clamp(1.95rem, 1.32rem + 2.70vw, 3.25rem);
  --fs-h2:      clamp(1.55rem, 1.17rem + 1.62vw, 2.35rem);
  --fs-h3:      clamp(1.20rem, 1.05rem + 0.65vw, 1.50rem);
  --fs-h4:      clamp(1.05rem, 0.99rem + 0.24vw, 1.16rem);
  --fs-lead:    clamp(1.06rem, 0.99rem + 0.32vw, 1.25rem);
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;

  --lh-tight: 1.1;
  --lh-head:  1.2;
  --lh-body:  1.65;
  --ls-tight: -0.02em;
  --ls-eyebrow: 0.09em;

  /* ---------- Space (4px base) ---------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;   --s-8: 2rem;     --s-10: 2.5rem;
  --s-12: 3rem;    --s-16: 4rem;    --s-20: 5rem;    --s-24: 6rem;
  /* Ritmo vertical: se recortó cerca de un 25 % respecto a la
     iteración anterior (era 3rem–6rem), sin tocar áreas táctiles. */
  --section-y: clamp(2.25rem, 1.5rem + 3.4vw, 4.5rem);
  --section-y-tight: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 0.6rem + 1.7vw, 2rem);

  /* ---------- Radius / elevation / motion ---------- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(6,36,63,.07), 0 1px 3px rgba(6,36,63,.06);
  --shadow-md: 0 4px 10px rgba(6,36,63,.07), 0 2px 4px rgba(6,36,63,.05);
  --shadow-lg: 0 18px 40px rgba(6,36,63,.11), 0 4px 12px rgba(6,36,63,.06);
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 180ms;

  --header-h: 74px;
}

@media (max-width: 900px) {
  :root { --header-h: 64px; }
}