/* ============================================================
   Mathematics with Ash — Brand design tokens (neo-brutalist "paper")
   Single source of truth for colour, type, spacing, layout.
   Matches the marketing site's fwa.css. Do not hardcode hex elsewhere.
   ============================================================ */

:root {
  /* --- Brand palette --- */
  --navy:      #1A2C4E; /* ink — headings, French text, borders, hard shadows */
  --coral:     #185FA5; /* accent (blue theme) — rules, buttons, large headers */
  --coral-ink: #134A82; /* darker blue for small labels (AA on paper) */
  --blue:      #185FA5; /* links, secondary accents */
  --cream:     #EFE8DA; /* alternating band / callout */
  --paper:     #F3EEE3; /* page background (grid overlay optional) */
  --grey:      #5B6579; /* muted body text */
  --faint:     #8A93A6; /* meta, captions */
  --hairline:  #E7E0D2; /* internal dividers, table rules */
  --dashed:    #B9B0A0; /* dashed / placeholder borders */
  --ink:       var(--navy);
  --surface:   #FFFFFF;

  /* --- Semantic aliases --- */
  --color-text:        var(--navy);
  --color-text-muted:  var(--grey);
  --color-bg:          var(--paper);
  --color-surface:     #FFFFFF;
  --color-link:        var(--blue);
  --color-link-hover:  #11457a;
  --color-rule:        var(--coral);
  --color-border:      var(--hairline);

  /* Feedback colours — AA contrast on paper; never the sole signal. */
  --color-ok:        #1F7A4D;
  --color-ok-bg:     #E6F1EA;
  --color-err:       #B23B2E;
  --color-err-bg:    #F7E7E3;

  --on-coral: #FFFFFF; /* white on coral — buttons are large/bold (AA-large) */
  --on-navy:  var(--cream);

  /* Milestone accent — warm terracotta, deliberately distinct from the blue
     theme, used only for the Kids Track checkpoint tiles + pages. */
  --milestone:     #C15F2C; /* terracotta — tile border/badge, large text */
  --milestone-ink: #9A481F; /* darker terracotta — small labels (AA on tint) */
  --milestone-bg:  #F8E7DA; /* warm tile background */
  --on-milestone:  #FFFFFF;

  /* --- Typography --- */
  --font-display: 'Anton', Impact, sans-serif;                        /* big display titles */
  --font-head:    'Noto Sans', system-ui, -apple-system, sans-serif;  /* structural headings */
  --font-body:    'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-fr:      'Lora', Georgia, 'Times New Roman', serif;          /* all French text */
  --font-mono:    'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Modular-ish type scale (mobile-first). rem-based. */
  --fs-300: 0.8125rem;  /* 13px — fine print, badges */
  --fs-350: 0.9375rem;  /* 15px — secondary */
  --fs-400: 1rem;       /* 16px — body */
  --fs-500: 1.125rem;   /* 18px — lead body, French examples */
  --fs-600: 1.3125rem;  /* 21px — h4 / subheads */
  --fs-700: 1.625rem;   /* 26px — h3 section titles */
  --fs-800: 2rem;       /* 32px — h2 */
  --fs-900: 2.5rem;     /* 40px — h1 chapter title */

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-body:  1.65;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* --- Spacing scale --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* --- Layout --- */
  --measure: 44rem;     /* max reading width */
  --page-pad: 1.25rem;  /* horizontal page gutter (mobile) */
  --tap: 44px;          /* minimum touch target */

  /* --- Shape & elevation (hard offset shadows, thick ink borders) --- */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 18px;
  --rule-w: 4px;                          /* coral display rule thickness */
  --border-ink: 2.5px solid var(--navy);
  --shadow-1: 4px 4px 0 var(--navy);      /* hard offset — small cards */
  --shadow-2: 6px 6px 0 var(--navy);      /* hard offset — panels */
  --shadow-coral: 6px 6px 0 var(--coral); /* featured / accent shadow */

  /* --- Focus --- */
  --focus-ring: 0 0 0 3px var(--paper), 0 0 0 6px var(--coral);
  --focus-outline: 3px solid var(--coral);

  /* --- Motion --- */
  --dur-fast: 120ms;
  --dur:      220ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Z layers --- */
  --z-header: 50;
}

@media (min-width: 48rem) {
  :root {
    --page-pad: 2rem;
    --fs-900: 2.875rem; /* 46px */
    --fs-800: 2.125rem;
    --fs-700: 1.75rem;
  }
}