/* MathPert design tokens — "The Marking" redesign (2026-06-13)
 * CSS custom properties only. No selectors with side-effects beyond :root.
 * Palette lifted from the founder-approved landing-marking.html:
 * night cinema + marked exam paper (cream, ink, red pen, amber, teal).
 * Previous token set preserved at backup-2026-06-13/tokens.css.
 */

:root {
  /* --- Brand & ink — The Marking --------------------------------------- */
  --color-brand-primary: #F5A623;     /* amber — CTAs only                */
  --color-brand-dark:    #080D1B;     /* night — cinematic ground         */
  --color-brand-accent:  #C93B22;     /* red marking pen (on paper)       */

  --color-ink:           #1C2742;     /* primary text on paper            */
  --color-ink-muted:     #535B6E;     /* secondary text                   */

  --color-surface:       #FAF3E6;     /* exam paper                       */
  --color-surface-muted: #F2E7D2;     /* deeper paper for muted sections  */
  --color-surface-dark:  #080D1B;     /* night ground for dark sections   */

  --color-border:        rgba(28, 39, 66, 0.12);

  --color-success:       #0F9B8E;     /* teal tick                        */
  --color-warn:          #8A6303;     /* amber-deep                       */

  /* --- Marking additions ------------------------------------------------ */
  --color-pen:           #C93B22;     /* red pen on paper                 */
  --color-pen-bright:    #E2503A;     /* red pen on night                 */
  --color-teal:          #0F9B8E;
  --color-amber-deep:    #8A6303;
  --color-bone:          #F2EDE3;     /* light text on night              */
  --color-bone-dim:      #9AA3B8;     /* dim text on night                */
  --color-ink-mid:       #3A4A78;
  --line-gap:            2.4em;       /* ruled-paper line spacing         */

  /* --- Text-safe variants (WCAG AA for small text, audit U-14, 2026-11-06)
   * The bright pen red and teal stay for large display text, rings and
   * ticks; these darker inks are for small text on paper.            */
  --color-pen-text:      #A8321C;     /* red pen, small text: 6.1 paper, 5.5 deep */
  --color-teal-text:     #0F6E64;     /* teal, small text: 6.1 white, 5.6 paper   */
  --color-muted-text:    #5F6678;     /* muted grey, small text: 5.7 white        */
  --color-crumb-current: rgba(154, 163, 184, 0.9); /* breadcrumb current, night */
  --color-focus:         var(--color-ink);        /* focus ring on paper       */
  --color-focus-dark:    var(--color-brand-primary); /* focus ring on night    */

  /* --- Spacing scale (4px base) ----------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-9:  2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;

  /* --- Fluid type scale -------------------------------------------------- */
  --text-xs:      clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --text-sm:      clamp(0.875rem, 0.85rem + 0.18vw, 0.95rem);
  --text-base:    clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --text-lg:      clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);
  --text-xl:      clamp(1.35rem, 1.2rem + 0.7vw, 1.65rem);
  --text-2xl:     clamp(1.75rem, 1.5rem + 1.2vw, 2.4rem);
  --text-3xl:     clamp(2.25rem, 1.9rem + 1.8vw, 3.3rem);
  --text-display: clamp(2.6rem, 2rem + 3vw, 5rem);

  /* --- Fonts -------------------------------------------------------------- */
  /* Display: Fraunces (variable, optical-sizing aware).
   * Body: Schibsted Grotesk. Hand: Caveat (margin annotations). */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Schibsted Grotesk", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", "Roboto", sans-serif;
  --font-hand:    "Caveat", cursive;

  /* --- Radii --------------------------------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   18px;
  --radius-pill: 999px;

  /* --- Shadows ---------------------------------------------------------------- */
  --shadow-sm: 0 2px 8px rgba(28, 39, 66, 0.06);
  --shadow-md: 0 1px 3px rgba(28, 39, 66, 0.1), 0 18px 30px -16px rgba(28, 39, 66, 0.3);
  --shadow-lg: 0 3px 8px rgba(28, 39, 66, 0.15), 0 36px 64px -26px rgba(28, 39, 66, 0.4);
  --shadow-cta: 0 3px 0 var(--color-amber-deep), 0 18px 36px -12px rgba(245, 166, 35, 0.55);
  --shadow-cta-hover: 0 5px 0 var(--color-amber-deep), 0 24px 42px -12px rgba(245, 166, 35, 0.6);

  /* --- Motion -------------------------------------------------------------------- */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:  160ms;
  --duration-base:  280ms;
  --duration-slow:  520ms;
}