/* ==========================================================================
   Design tokens
   Source: docs/plans/*.md (extracted from the QASAS Legal reference site),
   reconciled into one set. Token names are semantic; components never use raw
   hex values. Where the three plan files disagree (e.g. `text.secondary` is
   #2563eb, #4662ac or #374151 depending on the page) each colour is kept and
   given the role it actually plays:

     #4662ac  brand           – accent, buttons, brand surfaces
     #2563eb  link            – inline links
     #3b82f6  accent on dark  – brand accent on black (brand blue itself is 3.6:1 on black)
     #374151  text soft       – secondary text
     #6b7280  text muted      – tertiary text (white / gray-50 backgrounds only, 4.6:1+)
     #eff6ff  surface tint    – tinted bands
     #f9fafb  surface subtle  – alternate bands
     #e5e7eb  border          – hairlines
     #9ca3af  border strong   – decorative dividers only (2.5:1, fails for controls)

   Accessibility overrides (WCAG 2.2 AA is a stated requirement of the plans):
     --color-border-control  #6b7280  form control borders need 3:1 (the plan's #9ca3af is 2.5:1)
   ========================================================================== */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Typography ---------------------------------------------------- */
  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  /* Scale from the plans: 14, 15, 16, 18, 20, 20.8, 36, 48, 60 px */
  --text-caption: 0.875rem;    /* 14px  font.size.xs */
  --text-small: 0.9375rem;     /* 15px  font.size.sm */
  --text-body: 1rem;           /* 16px  font.size.base / md */
  --text-body-lg: 1.125rem;    /* 18px  profile lead */
  --text-lead: 1.25rem;        /* 20px  font.size.lg */
  --text-heading-sm: 1.3rem;   /* 20.8px font.size.xl (home) */
  --text-heading: 2.25rem;     /* 36px  font.size.2xl */
  --text-display-sm: 3rem;     /* 48px  profile heading */
  --text-display: 3.75rem;     /* 60px  font.size.3xl / people heading */

  --leading-body: 1.5;         /* 24px on 16px base */
  --leading-snug: 1.3;
  --leading-tight: 1.1;

  /* ---- Colour (semantic, light surfaces) ------------------------------ */
  --color-text: #101010;
  --color-text-soft: #374151;
  --color-text-muted: #6b7280;
  --color-brand: #4662ac;
  --color-brand-strong: #3a5290;       /* hover / pressed shade of brand (7.5:1 on white) */
  --color-link: #2563eb;
  --color-accent-on-dark: #3b82f6;
  --color-surface: #ffffff;
  --color-surface-subtle: #f9fafb;
  --color-surface-tint: #eff6ff;
  --color-surface-inverse: #000000;
  --color-border: #e5e7eb;
  --color-border-strong: #9ca3af;
  --color-border-control: #6b7280;
  --color-danger: #b91c1c;             /* 6.5:1 on white */
  --color-success: #047857;

  /* ---- Contextual tokens: components read these, surfaces redefine them ---- */
  --text: var(--color-text);
  --text-soft: var(--color-text-soft);
  --text-muted: var(--color-text-muted);
  --accent: var(--color-brand);
  --line: var(--color-border);
  --focus-ring: var(--color-link);
  --danger: var(--color-danger);

  /* ---- Spacing (plan scale: 8, 10, 12, 14, 16, 20, 24, 32, 64 px) ---------- */
  --space-8: 0.5rem;
  --space-10: 0.625rem;
  --space-12: 0.75rem;
  --space-14: 0.875rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-64: 4rem;

  /* ---- Shape, elevation, motion ------------------------------------------- */
  --radius-control: 8px;       /* radius.xs */
  --radius-pill: 9999px;       /* radius.sm */
  --shadow-card: 0 0 0 0 rgb(0 0 0 / 0), 0 0 0 0 rgb(0 0 0 / 0), 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);  /* shadow.1 */
  --shadow-none: none;                                                                                                            /* shadow.2 */
  --duration-instant: 150ms;
  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Layout --------------------------------------------------------------- */
  --container: 75rem;          /* 1200px */
  --container-narrow: 51rem;   /* 816px reading width */
  --gutter: var(--space-16);
  --header-height: 4rem;       /* 64px */
}

@media (min-width: 40rem) {
  :root { --gutter: var(--space-24); }
}

@media (min-width: 64rem) {
  :root { --gutter: var(--space-32); }
}

/* ---- Surface contexts: re-point the contextual tokens ---------------------- */

.surface-dark {
  --text: #ffffff;
  --text-soft: #d1d5db;           /* 14:1 on black */
  --text-muted: #9ca3af;          /* 8.3:1 on black */
  --accent: var(--color-accent-on-dark);
  --line: rgb(255 255 255 / 0.2);
  --focus-ring: #ffffff;
  --danger: #fca5a5;
  background: var(--color-surface-inverse);
  color: var(--text);
}

.surface-brand {
  --text: #ffffff;                /* 5.8:1 on brand */
  --text-soft: #eff6ff;           /* 5.1:1 on brand */
  --text-muted: #eff6ff;
  --accent: #ffffff;
  --line: rgb(255 255 255 / 0.35);
  --focus-ring: #ffffff;
  --danger: #fecaca;
  background: var(--color-brand);
  color: var(--text);
}