/* =========================================================
   JOIN · Design Tokens
   v3.0 (Jul 2026) - "admin-grade" refresh, aligned to the
   compact UI reference Alexa supplied (14 Jul): warm greys,
   hairline borders as ink alphas, muted functional colour,
   calmer/larger type, 6/10px radii, layered soft shadows,
   motion tokens. Components use tokens only - never raw hex.
   Type: Inter Tight (display/headings) + Inter (UI/body).
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;450;500;600;700&family=Inter+Tight:wght@500;600;700&display=swap');

:root {
  /* ---------- Brand (logos / letterhead only - not UI chrome) ---------- */
  --brand-navy: #03132B;
  --brand-gold: #E5BA41;

  /* ---------- Ink (primary text + actions - never #000) ---------- */
  --accent:       #141414;
  --accent-hover: #2E2E2E;
  --focus:        rgba(20, 20, 20, 0.08);

  /* ---------- Canvas & surfaces ---------- */
  --bg:        #F4F4F4;   /* page canvas - cards sit white on it */
  --surface:   #FFFFFF;   /* cards, nav, drawers */
  --surface-2: #FAFAFA;   /* row hover, wells, sunken areas */
  --surface-3: #EDEDED;   /* seg tracks, pressed wells */

  /* ---------- Hairlines (ink alphas, not solid greys) ---------- */
  --border:        rgba(20, 20, 20, 0.10);
  --border-strong: rgba(20, 20, 20, 0.18);
  --border-soft:   rgba(20, 20, 20, 0.05);
  --scrim:         rgba(20, 20, 20, 0.44);

  /* ---------- Text ---------- */
  --fg:      #141414;
  --fg-2:    #2E2E2E;
  --muted:   #6E6E6E;
  --muted-2: #9C9C9C;

  /* ---------- Grey scale (raw - prefer semantic tokens above) ---------- */
  --slate-50:  #FAFAFA;
  --slate-100: #F4F4F4;
  --slate-200: #EDEDED;
  --slate-300: #D6D6D6;
  --slate-400: #9C9C9C;
  --slate-500: #6E6E6E;
  --slate-600: #4A4A4A;
  --slate-700: #2E2E2E;
  --slate-800: #1F1F1F;
  --slate-900: #141414;

  /* ---------- Functional colour (status only, never decorative) ---------- */
  --success: #1F7A4D;
  --warning: #9A660D;
  --danger:  #B23A2B;
  --info:    #3061A8;

  /* Tinted backgrounds + text pairs for pills/badges/alerts (pastel, a touch vibrant) */
  --success-bg: #DCF3E4;  --success-fg: #1F7A4D;
  --warning-bg: #FAEECB;  --warning-fg: #9A660D;
  --danger-bg:  #FBE2DD;  --danger-fg:  #B23A2B;
  --info-bg:    #E0EBFA;  --info-fg:    #3061A8;
  --gold-bg:    #FAEECB;  --gold-fg:    #9A660D;
  --neutral-bg: var(--surface-3);
  --neutral-fg: var(--fg-2);

  /* Soft pastels - extra colour for tags/dropdown options (non-semantic) */
  --tag-slate-bg: #E6EAF3; --tag-slate-fg: #48587C;
  --tag-sky-bg:   #DBEBFC; --tag-sky-fg:   #2C6CB8;
  --tag-mint-bg:  #D7F3E2; --tag-mint-fg:  #1D8354;
  --tag-lilac-bg: #EAE1FC; --tag-lilac-fg: #6842C8;
  --tag-peach-bg: #FDE5D0; --tag-peach-fg: #BA641C;
  --tag-rose-bg:  #FCDFE9; --tag-rose-fg:  #C23D68;

  /* ---------- Typography ---------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', system-ui, sans-serif;
  --font-heading: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* legacy token - renders Inter, use with tabular-nums */

  /* Type scale - TWO text sizes only (Alexa, 14 Jul): 14px for all reading
     text, 10px for all supporting text (labels, captions, pills, hints).
     Reduced 14/12 -> 12/10 (Alexa, 14 Jul) to match the Handover admin density.
     Headings have their own scale. Every -sm/caption/label token maps to
     one of the two so nothing drifts. */
  --fs-display:    28px;   --lh-display:    1.15;
  --fs-h-xl:       22px;   --lh-h-xl:       1.15;
  --fs-h-lg:       17px;   --lh-h-lg:       1.2;
  --fs-h:          15px;   --lh-h:          1.3;
  --fs-body:       12px;   --lh-body:       1.5;
  --fs-body-sm:    12px;   --lh-body-sm:    1.5;
  --fs-label:      10px;   --lh-label:      1.3;
  --fs-caption:    10px;   --lh-caption:    1.4;
  --fs-mono:       10px;   --lh-mono:       1.5;
  --track-wide:    0.07em; /* uppercase micro-labels, table headers, eyebrows */

  /* ---------- Spacing (4-pt baseline) ---------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- Controls ---------- */
  --control-h: 32px;   /* EVERY compact control (buttons, inputs, chips, selects, seg) is this tall */

  /* ---------- Radius ---------- */
  --radius-sm:  4px;
  --radius:     6px;    /* controls: buttons, inputs, chips (non-pill) */
  --radius-lg:  10px;   /* cards, drawers, modals */
  --radius-xl: 14px;
  --radius-full: 999px;

  /* ---------- Elevation (layered, quiet - hairlines do the work) ---------- */
  --shadow-sm: 0 1px 0 rgba(20, 20, 20, 0.02), 0 1px 3px rgba(20, 20, 20, 0.05);
  --shadow:    0 2px 4px rgba(20, 20, 20, 0.05), 0 12px 32px rgba(20, 20, 20, 0.10);
  --shadow-lg: 0 4px 8px rgba(20, 20, 20, 0.06), 0 24px 64px rgba(20, 20, 20, 0.18);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med: 200ms;
}

/* ---------- Page reset & base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ---------- Print: A4, white surfaces, no chrome ---------- */
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; }
  .lib-rail, .shell-topbar, .shell-side, .page-actions, .crosslinks { display: none !important; }
  .lib-section, .lib-block, .card { break-inside: avoid; box-shadow: none; }
  .card { border: 1px solid var(--border) !important; }
}