/* tokens.css — shared design tokens. The single source of truth for every colour in the app.
   Change a value here and it changes everywhere: all six pages now reference these tokens rather
   than hardcoded hexes, in both inline `style="…"` and Tailwind arbitrary values
   (`text-[color:var(--text-tertiary)]`). Loaded before main.css on every page.

   The colour convergence landed 2026-07-14 (PHB-57): ~20 ad-hoc greys and 5 ad-hoc accents across
   the six pages were mapped onto the set below, by role (text / surface / border), not by raw value.
   Font sizes are deliberately NOT tokenised yet — those move layout, and that's a separate pass. */
:root {
  /* Surfaces — darkest to lightest */
  --bg: #08090a;
  --surface-sunken: #0d0d0d;
  --surface: #111111;
  --surface-hover: #161616;
  --surface-raised: #181818;

  /* Borders */
  --border: rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.11);
  --border-accent: #029C88;

  /* Text — primary to dimmest */
  --text-primary: #f7f8f8;
  --text-secondary: #d0d6e0;
  --text-tertiary: #8a8f98;
  --text-muted: #5c6169;
  --text-accent: #029C88;

  /* Accents */
  --accent: #029C88;
  --accent-hover: #02b39e;
  --accent-bright: #00DBBE;
  --accent-soft: #57C09E;
  --success: #10B981;
  --warn: #FEAE57;
  --danger: #F87171;

  /* Accent washes (tinted fills) */
  --accent-wash: rgba(2,156,136,0.1);
  --accent-wash-strong: rgba(2,156,136,0.2);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.6);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4);
  --shadow-lg: 0 25px 64px rgba(0,0,0,0.8), 0 4px 16px rgba(0,0,0,0.5);

  /* Type scale. 22 ad-hoc sizes (9–32px, plus seven different rem values) collapsed onto these.
     In Tailwind arbitrary values these MUST carry the `length:` hint —
     `text-[length:var(--text-sm)]`. A bare `text-[var(--text-sm)]` silently drops the utility and
     the element falls back to the 16px browser default. */
  --text-3xs: 9px;
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;
  --text-4xl: 32px;

  /* Radii */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 300px;
  --radius-circle: 50%;

  /* Spacing is deliberately NOT tokenised as a ramp: 29 distinct values, but a global ramp doesn't
     buy "change it in one place" — you never want to move every 8px gap at once. What you DO want is
     component spacing: "all the small buttons share a padding, change it once." That's the block
     below. Anything not listed here stays a literal value on purpose. */

  /* Component spacing — the "change all small buttons at once" layer.
     Before this existed the app had EIGHT different button paddings (some in CSS, some as Tailwind
     px-/py- classes in the markup). These three are now the standard; the values are anchored on
     projects.html, the most deliberately designed surface. */
  --btn-pad: 7px 14px;
  --btn-pad-sm: 6px 12px;
  --btn-pad-lg: 10px 24px;
  --btn-fs: var(--text-base);
  --btn-fs-sm: var(--text-sm);
  --btn-weight: 600;
  --accent-deep: #007D61;   /* the primary-button hover on crew/admin/home */

  --chip-pad: 2px 8px;
  --tag-pad: 2px 8px;
  --input-pad: 10px 16px;
}