/* ============================================================
   French with Ash — Brand design tokens
   Single source of truth for colour, type, spacing, layout.
   Brand palette per PRD §9. Do not hardcode hex elsewhere.
   ============================================================ */

:root {
  /* --- Brand palette (PRD §9) --- */
  --navy:     #1A2C4E; /* headings, French text, primary text, borders */
  --coral:    #D97757; /* rules, buttons, large headers ONLY (fails on small text) */
  --blue:     #185FA5; /* links, secondary accents */
  --cream:    #F8F4ED; /* example boxes, Montréal callout band */
  --paper:    #FCFAF5; /* page background */
  --grey:     #6B7280; /* muted text, footers */
  --hairline: #D8D2C5; /* dividers, table rules */

  /* --- 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 — chosen for AA contrast on cream/paper.
     Colour is never the sole signal (text + icon accompany these). */
  --color-ok:        #1F7A4D;
  --color-ok-bg:     #E6F1EA;
  --color-err:       #B23B2E;
  --color-err-bg:    #F7E7E3;

  /* On-coral text: navy passes AA-large; coral is only used behind
     large/bold text or as a rule, never behind small text. */
  --on-coral: var(--navy);
  --on-navy:  var(--cream);

  /* --- Typography --- */
  --font-head: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-fr:   var(--font-head); /* all French text is set in Lora */
  --font-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;

  /* --- 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 (PRD §9) */

  /* --- Shape & elevation --- */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --rule-w: 3px;        /* coral display rule thickness */
  --shadow-1: 0 1px 2px rgba(26,44,78,0.06), 0 2px 8px rgba(26,44,78,0.06);
  --shadow-2: 0 2px 6px rgba(26,44,78,0.08), 0 8px 24px rgba(26,44,78,0.10);

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

  /* --- Motion --- */
  --dur-fast: 120ms;
  --dur:      220ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 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;
  }
}