/* ═══════════════════════════════════════════════════════════════════════
   WPL Harbour Client Dashboard — design tokens (single source of truth)
   Source design: "Workspace V11 (Current).dc.html" (the V9→V11 lineage).
   Every colour, size, font and shadow used by components/ and screens/
   comes from these variables. tokens.json mirrors this file as data.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Type families ─────────────────────────────────────────────────── */
  /* Newsreader = display serif (headings, totals, big numbers).
     Plus Jakarta Sans = everything else. Weights 300/400/500/600 ONLY —
     nothing heavier than 600. Tabular figures on both root containers. */
  --font-display: 'Newsreader', Georgia, serif;
  --font-ui: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* ── Type scale (px values are exact to the design — do not round) ─── */
  --text-kicker-xs: 8.3px;   /* tiny uppercase column kickers (detail header) */
  --text-kicker: 8.7px;      /* uppercase filter labels, round-two chip */
  --text-kicker-lg: 9.5px;   /* section kickers ("Assessment", "AI READ") */
  --text-2xs: 10.1px;        /* chips, counts, card refs */
  --text-xs: 10.6px;         /* small meta, dates */
  --text-sm: 11.5px;         /* secondary body, hints */
  --text-base: 12.4px;       /* standard UI body */
  --text-md: 12.9px;         /* buttons, primary UI copy */
  --text-lg: 13.3px;         /* nav items, chat copy */
  --text-body: 13.8px;       /* root body / prose */
  --text-xl: 15.5px;         /* email prose (serif) */

  --display-2xs: 15.8px;     /* rail item titles (serif) */
  --display-xs: 16.6px;      /* kanban column titles, classification lede */
  --display-sm: 19px;        /* drawer titles */
  --display-md: 21.2px;      /* modal titles */
  --display-lg: 23px;        /* detail header title */
  --display-xl: 28.5px;      /* screen h1 ("Good evening, Alex.") */
  --display-stat: 32px;      /* insight card figures */
  --display-stat-lg: 38px;   /* insight card hero figures */

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-kicker: 0.12em; /* uppercase micro-labels */
  --tracking-wide: 0.09em;
  --tracking-display: -0.012em;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;   /* the ceiling — never 700+ in UI copy */

  /* ── Brand / accent ────────────────────────────────────────────────── */
  --accent: #59a372;            /* primary actions, selection, active */
  --accent-strong: #4E9266;     /* hover on solid accent buttons */
  --accent-deep: #2E7D52;       /* accent text on tinted grounds */
  --accent-text: #2f6f50;       /* active choice-card text */
  --accent-ink: #1F5A3A;        /* dark green display figures */
  --live: #00bc6f;              /* the live / in-flight pulse */

  /* Accent alpha tints (backgrounds, rings) */
  --accent-a05: rgba(89,163,114,0.05);
  --accent-a08: rgba(89,163,114,0.08);
  --accent-a12: rgba(89,163,114,0.12);
  --accent-a16: rgba(89,163,114,0.16);
  --accent-a24: rgba(89,163,114,0.24);
  --accent-a32: rgba(89,163,114,0.32);
  --accent-ring: rgba(89,163,114,0.13);
  --live-a16: rgba(0,188,111,0.16);

  /* ── Surfaces & neutrals ───────────────────────────────────────────── */
  --bg-app: radial-gradient(95% 75% at 100% 0%, #F7F8F8 0%, #FAFBFB 28%, #FDFDFD 56%, #FEFEFE 100%);
  --bg-body: #EEF1F0;           /* body fallback behind the wash */
  --surface: #FFFFFF;           /* cards, tables, modals */
  --surface-raised: #FBFCFB;    /* inputs at rest, quiet wells */
  --surface-sunken: #F4F7F5;    /* detail rail, table zebra wells */
  --surface-tray: #EFF2F0;      /* kanban column tray */
  --surface-head: #E8ECE9;      /* mini-table header bands */
  --surface-seg: #E1E7E3;       /* segmented-control track */
  --surface-chip: #EEF1EF;      /* neutral chips */
  --surface-hover: #F1F4F2;     /* row / button hover wash */

  --border: #DEE4E0;            /* card border */
  --border-soft: #E2E8E4;       /* inner borders, table rules */
  --border-faint: #F0F3F1;      /* row separators */
  --border-hair: #ECEFEC;       /* hairlines inside cards */
  --border-input: #DAE1DC;      /* input + secondary button border */
  --border-input-2: #DCE3DE;    /* detail-view input border */
  --border-dashed: #C7D2CA;     /* dashed add-affordances */
  --border-seg: #D5DCD7;        /* segmented-control border */

  --sidebar-bg: #333d47;        /* dark slate rail */
  --sidebar-fg: rgba(255,255,255,0.74);
  --sidebar-fg-dim: rgba(255,255,255,0.5);
  --sidebar-fg-faint: rgba(255,255,255,0.4);
  --sidebar-active-bg: rgba(89,163,114,0.24);
  --sidebar-badge-bg: rgba(255,255,255,0.16);
  --sidebar-divider: rgba(255,255,255,0.1);

  /* ── Text ──────────────────────────────────────────────────────────── */
  --ink: #23221D;               /* primary */
  --ink-soft: #3A382F;          /* strong secondary (headings-adjacent) */
  --ink-body: #46443C;          /* prose body */
  --ink-mid: #5D5A51;
  --text-secondary: #6E6B61;
  --text-tertiary: #7A766B;
  --text-muted: #8A8678;
  --text-faint: #9A968B;
  --text-ghost: #A8A496;
  --text-placeholder: #B5AF9F;

  /* ── Status hues ───────────────────────────────────────────────────── */
  --status-needs: #C7A66B;         /* amber dot */
  --status-needs-text: #9A7339;
  --status-needs-strong: #A8814A;  /* blocking CTA, warning triangle */
  --status-needs-a06: rgba(168,129,74,0.06);
  --status-needs-a12: rgba(168,129,74,0.12);
  --status-needs-a32: rgba(168,129,74,0.32);
  --status-priced: #3F6BA6;
  --status-priced-a10: rgba(63,107,166,0.10);
  --status-sent: #5A7FB0;
  --status-won: #4F8A5B;
  --status-won-a13: rgba(89,163,114,0.13);
  --status-lost: #7E6A66;
  --status-aside: #9A968B;
  --alert: #DA5A47;                /* filter-active, clear-✕ */
  --alert-text: #C24632;
  --alert-a14: rgba(218,90,71,0.14);
  --danger: #C14B44;               /* destructive buttons */
  --danger-strong: #A83E38;
  --danger-soft: #B4483B;
  --danger-a06: rgba(193,75,68,0.06);
  --danger-a10: rgba(193,75,68,0.1);

  /* ── Measurement provenance (three-state system) ───────────────────── */
  --prov-red: #DA5A47;      /* AI measured it itself — glowing, check it */
  --prov-yellow: #E0A100;   /* AI scanned a written figure — worth a glance */
  --prov-green: #2E7D52;    /* a person has ruled on every read */
  --prov-red-a08: rgba(218,90,71,0.08);
  --prov-yellow-a10: rgba(224,161,0,0.10);
  --prov-green-a14: rgba(89,163,114,0.14);

  /* ── Complexity / score tiers ──────────────────────────────────────── */
  /* Marcus's ruling (V13): an honest 1–3 job-shape FIT, and LOWER reads as
     better. Level 1 (Simple) is a clean fit for WPL's systems and paints GREEN;
     level 2 (Moderate) amber; level 3 (Complex) an awkward fit, a muted mauve.
     So the cleanest jobs are green and the awkward ones muted — never the
     inverse. Each tier carries a text tone (the tier word / hover figure) and a
     brighter pip tone (the filled meter steps). The names track the SCORE band
     that lands the tier: --tier-high = the highest score (≥ 70) = Complex. */
  --tier-high: #8A655F;         /* score ≥ 70 → Complex — muted mauve (word) */
  --tier-high-pip: #B08880;     /* Complex pip */
  --tier-mid: #9A7339;          /* score ≥ 50 → Moderate — amber (word) */
  --tier-mid-pip: #C7A66B;      /* Moderate pip */
  --tier-low: #2E7D52;          /* below 50 → Simple — green (word) */
  --tier-low-pip: #4F8A5B;      /* Simple pip */

  /* ── Radii ─────────────────────────────────────────────────────────── */
  --r-xs: 6px;      /* small chips */
  --r-sm: 8px;      /* inline chips, tiny buttons */
  --r-md: 9px;      /* pills-in-tables, icon buttons */
  --r-lg: 11px;     /* buttons, kanban cards, nav items */
  --r-xl: 14px;     /* cards, popovers */
  --r-2xl: 16px;    /* panels, big cards */
  --r-3xl: 18px;    /* modals */
  --r-pill: 999px;

  /* ── Spacing scale ─────────────────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 6px;  --sp-3: 8px;  --sp-4: 10px; --sp-5: 12px;
  --sp-6: 14px; --sp-7: 16px; --sp-8: 20px; --sp-9: 24px; --sp-10: 32px;
  --sp-screen-x: 56px;   /* screen gutter (34px top, 56px sides, 90px bottom) */
  --sp-screen-t: 34px;
  --sp-screen-b: 90px;

  /* ── Shadows ───────────────────────────────────────────────────────── */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.03);
  --shadow-pop: 0 14px 38px rgba(0,0,0,0.16);
  --shadow-menu: 0 12px 34px rgba(20,28,24,0.14);
  --shadow-modal: 0 24px 60px rgba(0,0,0,0.28);
  --shadow-drawer: -18px 0 50px rgba(0,0,0,0.18);
  --shadow-toast: 0 14px 40px rgba(0,0,0,0.30);
  --shadow-accent-btn: 0 2px 8px rgba(89,163,114,0.30);

  /* ── Overlay / scrim ───────────────────────────────────────────────── */
  --scrim: rgba(28,26,20,0.42);
  --scrim-light: rgba(28,26,20,0.20);
  --tooltip-bg: #333d47;

  /* ── Motion ────────────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(.2,.72,.3,1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 340ms;
}