/* DevTrack Hub — design tokens (canonical / single source of truth)
 * ----------------------------------------------------------------------------
 * Source of truth: docs/handoff/01 - Design Tokens.md (oklch-native; the ≈#hex
 * comments are sRGB references only). Loaded GLOBALLY first via base.html so the
 * full token set is available to every page, kit and inline <style>.
 *
 * Rules (handoff):
 *  - Reference tokens BY NAME (var(--accent)); never paste literal values.
 *  - This file is the superset. Kit files (rd-kit.css, request-detail.css,
 *    tasks.css, shell-v2.css …) may re-declare a SUBSET in their own scope with
 *    identical values; the scoped copy wins locally, the global copy is the
 *    fallback everywhere else — so there is one canonical definition here.
 *  - Legacy aliases (--indigo*, --r-button/--r-card/--r-pill) are preserved at
 *    the bottom for back-compat with pages that still reference them.
 *
 * Note: oklch() needs Chrome 111+ / Safari 15.4+ / Firefox 113+.
 */

:root {
  /* ─────────────────────────── TYPOGRAPHY ─────────────────────────── */
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --text-base: 14px;

  /* ─────────────────────────── SURFACES ───────────────────────────── */
  --bg:        #F5F3EE;   /* app canvas (warm off-white) */
  --bg-deep:   #E9E6DF;   /* legacy deeper canvas (kept) */
  --card:      #FFFFFF;   /* card / panel surface */
  --ink:       #0F1222;   /* near-black: hero/dark cards, primary button */
  --sidebar:   #0B0D1B;   /* sidebar surface (darker than --ink) */
  --sidebar-line: #1A1D2E;/* sidebar dividers + ink-button hover */
  --ink-elev:  #161931;   /* KPI-accent gradient end */
  --ink-chip:  #11192C;   /* dark type-chip / type-card header */

  /* ─────────────────────────── TEXT ───────────────────────────────── */
  --ink-2:     #3A3F55;   /* secondary text */
  --muted:     #6B7085;   /* tertiary / labels / placeholder */
  --inverse:   #FFFFFF;   /* text on dark */
  /* on-dark steps: .7 body · .5 meta · .4 faint · .14 hairline (use rgba white) */

  /* ─────────────────────────── BORDERS ────────────────────────────── */
  --line:      #E6E4DE;   /* default border / divider */
  --line-2:    #EFEDE7;   /* subtle inner divider */
  --border-hover: oklch(0.84 0.015 80); /* input/select hover border */

  /* ─────────────────────────── BRAND / ACCENT (violet) ────────────── */
  --accent:      oklch(0.58 0.18 268);  /* ≈ #7C5CFF — brand primary / active */
  --accent-2:    oklch(0.72 0.14 268);  /* active nav icon, lighter */
  --accent-3:    oklch(0.86 0.08 268);  /* accent border */
  --accent-ink:  oklch(0.32 0.14 268);  /* text on accent-soft */
  --accent-soft: oklch(0.96 0.03 268);  /* info bg, focus ring, selected bg */
  --accent-rgb:  124,92,255;            /* for rgba() active states */

  /* ─────────────────────────── DATA-VIZ ───────────────────────────── */
  --c-blue:  oklch(0.62 0.14 240);  /* ≈ #5A86D8 */
  --c-teal:  oklch(0.65 0.12 195);  /* ≈ #46A6A0 — help-banner header */
  --c-lime:  oklch(0.78 0.16 130);  /* ≈ #84C341 */
  --c-amber: oklch(0.78 0.14 75);   /* ≈ #E8A33E — = --warn */
  --c-coral: oklch(0.65 0.17 30);   /* ≈ #DE6A4D — hero glow */

  /* ─────────────────────────── SEMANTIC ───────────────────────────── */
  --ok:     oklch(0.62 0.13 155);   /* ≈ #3F9F69 success */
  --warn:   oklch(0.78 0.14 75);    /* = --c-amber */
  --danger: oklch(0.55 0.19 25);    /* ≈ #CC3D33 */
  /* "info" = --accent / --accent-soft */
  /* status families — soft bg + ink text + border per hue */
  --ok-soft:    oklch(0.95 0.05 155);  --ok-ink:    oklch(0.34 0.12 155);  --ok-border:    oklch(0.84 0.09 155);
  --amber-soft: oklch(0.96 0.05 80);   --amber-ink: oklch(0.40 0.13 60);   --amber-border: oklch(0.88 0.10 80);
  --coral-soft: oklch(0.96 0.04 30);   --coral-ink: oklch(0.40 0.16 25);   --coral-border: oklch(0.88 0.08 30);
  --teal-soft:  oklch(0.95 0.04 195);  --teal-ink:  oklch(0.36 0.10 200);  --teal-border:  oklch(0.88 0.07 200);
  --violet-soft: var(--accent-soft);   --violet-ink: var(--accent-ink);    --violet-border: oklch(0.84 0.08 268);

  /* ─────────────────────────── SPACING (base unit 14px) ───────────── */
  --space-0: 0;     --space-1: 2px;   --space-2: 4px;   --space-3: 6px;
  --space-4: 8px;   --space-5: 10px;  --space-6: 12px;  --space-7: 14px;  /* base rhythm */
  --space-8: 16px;  --space-9: 18px;  --space-10: 20px; --space-11: 22px;
  --space-12: 24px; --space-14: 28px; --space-16: 32px; --space-20: 40px;
  --space-24: 48px; --space-28: 56px; --space-30: 60px;

  /* ─────────────────────────── RADII ──────────────────────────────── */
  --radius-xs:  4px;   /* tags, inline code */
  --radius-sm:  5px;   /* type chips, segmented buttons */
  --radius:     7px;   /* DEFAULT: inputs, buttons, search, icon-btn */
  --radius-md:  8px;   /* nested cards, dropzone, attachment icons */
  --radius-lg:  10px;  /* = --rd-radius — cards, pages */
  --radius-xl:  12px;  /* = --rd-radius-lg — primary cards, hero */
  --radius-2xl: 18px;  /* modals */
  --radius-pill: 99px; /* pills, badges, avatars, counters */

  /* ─────────────────────────── ELEVATION ──────────────────────────── */
  --shadow-sm:    0 1px 0 rgba(15,18,34,.04), 0 1px 2px rgba(15,18,34,.02);  /* resting cards */
  --shadow-seg:   0 1px 0 rgba(15,18,34,.06), 0 1px 3px rgba(15,18,34,.04);  /* segmented "on" */
  --shadow-md:    0 4px 8px rgba(15,18,34,.06);                              /* hover lift */
  --shadow-pop:   0 2px 6px rgba(15,18,34,.06);                              /* floating toggle */
  --shadow-modal: 0 30px 80px rgba(15,18,34,.30);                           /* modal panel */
  --focus-ring:   0 0 0 3px var(--accent-soft);                             /* focus / active input */

  /* ─────────────────────────── BORDER WIDTHS ──────────────────────── */
  --bw-hair: 1px;   --bw-1: 1.5px;  --bw-2: 2px;   --bw-3: 3px;

  /* ─────────────────────────── Z-INDEX ────────────────────────────── */
  --z-sticky-footer: 15;  /* sticky form action bar */
  --z-topbar:        20;  /* .tb / .rd-tb */
  --z-banner:        25;  /* timer "another task" banner */
  --z-floating:      30;  /* inspector toggle, gates */
  --z-modal-scrim:  100;  /* dialog backdrop + panel */
  --z-toast:        120;  /* reserved for toasts */

  /* ─────────────────────────── LAYOUT ─────────────────────────────── */
  --sidebar-w:           232px;
  --sidebar-w-collapsed: 64px;
  --topbar-h:            56px;
  --content-max:         1480px; /* wide layouts */
  --reading-max:         880px;  /* document / single-column */
  --cr-h:                38px;   /* unified form-control height */

  /* ─────────────────────────── BREAKPOINTS (reference) ────────────── */
  /* Real switch points — use these literals in @media (vars can't be used in MQ). */
  --bp-timer-hide: 1279px;  /* topbar timer hides at/below */
  --bp-grid:       1100px;  /* in-page multi-col grids → fewer cols */
  --bp-tablet:      960px;  /* sidebar → off-canvas drawer; app 1-col */
  --bp-phone:       720px;  /* content grids → 1-col; topbar condenses; tables scroll */
  --bp-small:       420px;  /* tightest padding + type */

  /* ─────────────────────────── DENSITY (regular default) ──────────── */
  --pad-card:  18px 20px;  /* = --rd-pad-card */
  --gap-stack: 14px;       /* = --rd-gap-stack */
  --row-pad:   9px 0;      /* = --rd-row-pad */
  --body-size: 13.5px;     /* = --rd-body-size */
  --line-h:    1.65;       /* = --rd-line */

  /* ─────────────────────────── --rd-* ALIASES ─────────────────────── */
  /* Production prefixes status families with --rd-. Aliased to the canonical
     tokens above so 1:1-ported CSS keeps working without duplicate values. */
  --rd-radius:    var(--radius-lg);
  --rd-radius-lg: var(--radius-xl);
  --rd-shadow-sm: var(--shadow-sm);
  --rd-shadow-md: var(--shadow-md);
  --rd-ok:    var(--ok);    --rd-ok-soft:    var(--ok-soft);    --rd-ok-ink:    var(--ok-ink);
  --rd-amber: var(--warn);  --rd-amber-soft: var(--amber-soft); --rd-amber-ink: var(--amber-ink);
  --rd-coral: var(--danger);--rd-coral-soft: var(--coral-soft); --rd-coral-ink: var(--coral-ink);
  --rd-teal:  var(--c-teal);--rd-teal-soft:  var(--teal-soft);  --rd-teal-ink:  var(--teal-ink);
  --rd-violet: var(--accent); --rd-violet-soft: var(--accent-soft);
  --rd-pad-card: var(--pad-card); --rd-gap-stack: var(--gap-stack);
  --rd-row-pad: var(--row-pad); --rd-body-size: var(--body-size); --rd-line: var(--line-h);

  /* ─────────────────────────── LEGACY ALIASES (back-compat) ───────── */
  /* Kept verbatim so pages that still reference the old names are unaffected. */
  --indigo:       oklch(0.48 0.18 258);
  --indigo-ink:   oklch(0.32 0.14 258);
  --indigo-soft:  oklch(0.96 0.03 258);
  --r-button: 10px;
  --r-card:   18px;
  --r-pill:   100px;
}

/* density overrides — toggle on a wrapper: <div data-density="compact"> */
[data-density="compact"]{ --pad-card:14px 16px; --gap-stack:10px; --row-pad:7px 0; --body-size:13px;  --line-h:1.55; }
[data-density="comfy"]  { --pad-card:22px 24px; --gap-stack:18px; --row-pad:11px 0; --body-size:14.5px; --line-h:1.75; }