/* ============================================================
   Design tokens. The single source for every page.
   Brand palette 2026-10-10: rich violet, dark ink, citron, warm off-white.
   Status colours are unchanged from HANDOVER §11 (verified, semantic).
   Light theme only in version 1: organisations cannot change colours,
   so every contrast pair below is guaranteed.

   Text contrast pairs (verified by tools/check-contrast.mjs; add any new
   pair there and here):
     body text           #202332 on #f7f7f2  14.50:1
     body text on card   #202332 on #ffffff  15.58:1
     secondary text      #525669 on #ffffff   7.26:1
     subtle micro text   #62667a on #ffffff   5.67:1
     violet link/text    #5b3fd6 on #ffffff   6.72:1
     white on primary    #ffffff on #5b3fd6   6.72:1
     text on violet tint #4527b5 on #ede9fe   8.00:1  (use --accent-strong, not --accent)
     ink on citron       #202332 on #dcef83  12.40:1
     in date             #065f46 on #d1fae5   6.78:1
     due soon            #92400e on #fef3c7   6.37:1
     overdue             #991b1b on #fee2e2   6.80:1
     neutral             #525669 on #efefe8   6.28:1
     tooltip             #ffffff on #202332  15.58:1
     tooltip emphasis    #dcef83 on #202332  12.40:1
   Non-text (3:1, WCAG 1.4.11):
     control border      #7e8294 on #ffffff   3.81:1 (3.30:1 on #efefe8)
     focus ring          #5b3fd6 on #f7f7f2   6.25:1
     due meter           #b45309 on #efefe8   4.35:1
   Rules:
     --border is decorative only: never the sole edge of a control.
     Citron is a background behind ink text only. Never text, a line or an icon
     on a light background (1.17:1 on the page).
     Status is always symbol + word + colour, never colour alone.
   ============================================================ */
:root {
  /* Type scale */
  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lg: clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem);
  --fs-xl: clamp(1.375rem, 1.28rem + 0.47vw, 1.625rem);
  --fs-2xl: clamp(1.75rem, 1.58rem + 0.85vw, 2.25rem);
  --fs-3xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
  --lh-tight: 1.15; --lh-snug: 1.3; --lh-base: 1.55;
  --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-caps: 0.08em;

  /* Space and shape */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;

  /* Elevation (tinted with the ink colour) */
  --shadow-xs: 0 1px 2px -0.5px rgb(32 35 50 / 0.04), 0 1px 2px -0.5px rgb(32 35 50 / 0.06);
  --shadow-sm: 0 1px 2px rgb(32 35 50 / 0.04), 0 2px 4px -1px rgb(32 35 50 / 0.06), 0 0 0 0.5px rgb(32 35 50 / 0.04);
  --shadow-md: 0 2px 4px -1px rgb(32 35 50 / 0.06), 0 4px 8px -2px rgb(32 35 50 / 0.08), 0 0 0 0.5px rgb(32 35 50 / 0.04);
  --shadow-xl: 0 8px 16px -4px rgb(32 35 50 / 0.08), 0 24px 48px -12px rgb(32 35 50 / 0.12), 0 0 0 0.5px rgb(32 35 50 / 0.04);
  --shadow-primary: 0 2px 8px rgb(91 63 214 / 0.22);
  --scrim: rgb(32 35 50 / 0.28);

  /* Motion. --dur-drawer is the ~400 ms drawer open in HANDOVER §6.3. */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 180ms; --dur-base: 240ms; --dur-slow: 360ms; --dur-drawer: 420ms;

  /* Layers */
  --z-sticky: 200; --z-pop: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;

  /* Surfaces and text */
  --bg: #f7f7f2; --surface: #ffffff; --surface-2: #efefe8;
  --fg: #202332; --fg-muted: #525669; --fg-subtle: #62667a;
  --border: #e4e4dc; --border-strong: #7e8294;

  /* Brand */
  --accent: #5b3fd6;          /* rich violet: primary actions, links, focus */
  --accent-fg: #ffffff;
  --accent-hover: #4527b5;
  --accent-strong: #4527b5;   /* violet text on --accent-soft */
  --accent-soft: #ede9fe;
  --citron: #dcef83;          /* marketing accent: backgrounds behind ink text only */
  --on-citron: #202332;

  /* Status */
  --ok-fg: #065f46; --ok-bg: #d1fae5;
  --due-fg: #92400e; --due-bg: #fef3c7; --due-mark: #b45309;  /* --due-mark: meter segments, not text */
  --late-fg: #991b1b; --late-bg: #fee2e2; --late-border: #fca5a5;
  --na-fg: #525669; --na-bg: #efefe8;

  /* Tooltip */
  --tip-bg: #202332; --tip-fg: #ffffff; --tip-em: #dcef83;

  --shadow-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}