/* ==========================================================================
   Material Academy — Design Tokens
   --------------------------------------------------------------------------
   Single source of truth for colour, type, spacing, borders and motion.
   Nothing in this file is decorative on its own; it only defines values.

   The blue scale is derived from the Material Academy crest, whose dominant
   colour measures #4070b0 (hue 212). The existing site already used #1d3b5e
   (hue 211) and #4a90e2 (hue 212), so this hue is the real brand blue rather
   than a new invention. The scale below is built on hue 212 throughout.

   Every colour pair used for text or UI borders in DESIGN-SYSTEM.md has been
   checked against WCAG 2.1 with computed contrast ratios, not by eye.
   ========================================================================== */

:root {

  /* ---------- Brand blue (hue 212) ------------------------------------- */
  --brand-950: #0a1826;
  --brand-900: #12283f;
  --brand-800: #1d3b5e;   /* headings, primary button          10.76:1 on paper */
  --brand-700: #27507d;   /* links                              7.83:1 on paper */
  --brand-600: #33669c;   /* focus ring                         5.62:1 on paper */
  --brand-500: #4070b0;   /* the crest blue itself */
  --brand-400: #6690c4;
  --brand-300: #93b2d7;
  --brand-200: #c0d1e7;
  --brand-100: #e0e9f3;
  --brand-50:  #f0f5fa;

  /* ---------- Accent: brass (hue 38) -----------------------------------
     Used only for calls to action and moments that must be noticed.
     Descended from the old site's #f85a40, desaturated and deepened so it
     reads as a seal on a certificate rather than a sale banner.            */
  --accent-800: #6b4415;
  --accent-700: #8a5a1c;   /* CTA background, white text        5.90:1 */
  --accent-600: #966f2b;   /* smallest accent that holds white  4.56:1 */
  --accent-500: #c08a3e;   /* decorative only — will NOT hold white text */
  --accent-200: #efdcc0;
  --accent-100: #f7ecdb;

  /* ---------- Warm neutrals --------------------------------------------
     Parchment, not #fff. Paper for the page, raised for cards.            */
  --paper:         #faf8f4;
  --paper-raised:  #ffffff;
  --paper-sunken:  #f2efe8;

  --ink-900: #1a1814;   /* body text                          16.71:1 */
  --ink-700: #3d382f;   /* secondary text                     10.97:1 */
  --ink-600: #5a5347;   /* muted text                          7.17:1 */
  --ink-400: #776f5e;   /* faintest permitted text             4.69:1 */

  /* ---------- Borders ---------------------------------------------------
     TWO tokens, deliberately. --rule is a decorative hairline and is NOT
     accessible as a control boundary. Any border that communicates an
     interactive element (inputs, selects, checkboxes) must use
     --border-control or --border-brand, which meet the 3:1 required by
     WCAG 2.1 SC 1.4.11 for user-interface components.                     */
  --rule:           #e2ddd2;   /* decorative separators only     1.28:1 */
  --border-control: #958d7d;   /* form inputs, UI boundaries     3.10:1 */
  --border-brand:   #6e91b9;   /* brand-tinted control border    3.09:1 */

  /* ---------- Semantic --------------------------------------------------- */
  --success: #1f7a4d;   /*  5.01:1 on paper */
  --error:   #a32b2b;   /*  6.74:1 on paper */
  --warning: #8a5a1c;   /*  5.56:1 on paper */
  --success-bg: #e8f3ed;
  --error-bg:   #f8eaea;
  --warning-bg: #f7ecdb;

  /* ---------- Type ------------------------------------------------------
     Two families, no more. Fraunces carries real character in the headings -
     the g and y are distinctive without tipping into decorative. Archivo is
     a sturdy grotesque that stays legible at small UI sizes.
     Fraunces defaults to SOFT 0 / WONK 0, which is the confident cut we
     want, so neither axis needs requesting or overriding.               */
  --font-serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans:  "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  /* Modular scale, ratio 1.25, base 1rem */
  --text-xs:   0.8rem;     /* 12.8px */
  --text-sm:   0.9rem;     /* 14.4px */
  --text-base: 1rem;       /* 16px   */
  --text-md:   1.125rem;   /* 18px   — long-form body */
  --text-lg:   1.25rem;    /* 20px   */
  --text-xl:   1.5625rem;  /* 25px   */
  --text-2xl:  1.9531rem;  /* 31.25px */
  --text-3xl:  2.4414rem;  /* 39px   */
  --text-4xl:  3.0518rem;  /* 48.8px */

  --leading-tight:  1.15;  /* display headings */
  --leading-snug:   1.3;   /* sub-headings */
  --leading-body:   1.6;   /* body copy */
  --leading-loose:  1.75;  /* small print */

  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;   /* small caps, eyebrows */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --measure: 68ch;   /* maximum line length for readable prose */

  /* ---------- Spacing — 8px base ---------------------------------------
     4px exists only for optical nudges inside components.                 */
  --space-0:  0;
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  2.5rem;    /* 40px */
  --space-8:  3rem;      /* 48px */
  --space-9:  4rem;      /* 64px */
  --space-10: 5rem;      /* 80px */
  --space-11: 6rem;      /* 96px */
  --space-12: 8rem;      /* 128px */

  /* ---------- Layout ----------------------------------------------------- */
  --container:       1200px;
  --container-prose: 720px;
  --gutter:          var(--space-4);
  --gutter-lg:       var(--space-6);
  --grid-columns:    12;

  /* ---------- Radius ----------------------------------------------------
     One value for most things, one for pills. Restraint is the point.     */
  --radius-sm:   3px;
  --radius:      6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* ---------- Elevation -------------------------------------------------
     Hairlines do most of the work. Shadow is reserved for things that
     genuinely float above the page (menus, dialogs).                      */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(10, 24, 38, 0.06);
  --shadow-md:   0 4px 12px rgba(10, 24, 38, 0.08);
  --shadow-lg:   0 12px 32px rgba(10, 24, 38, 0.12);

  /* ---------- Motion ----------------------------------------------------
     Interactive elements only. Nothing animates on load.                  */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration:    160ms;
  --duration-lg: 200ms;
  --transition:  var(--duration) var(--ease-out);

  /* ---------- Focus -----------------------------------------------------
     A visible ring on every interactive element, always.                  */
  --focus-ring-width:  3px;
  --focus-ring-color:  var(--brand-600);
  --focus-ring-offset: 2px;

  /* ---------- Layering --------------------------------------------------- */
  --z-base:     0;
  --z-sticky:   100;
  --z-header:   200;
  --z-dropdown: 300;
  --z-overlay:  400;
  --z-dialog:   500;
}

/* Respect users who ask for less movement. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration:    0ms;
    --duration-lg: 0ms;
  }
}