/* ============================================================
   TitleKnight Design System — tokens.css
   The source of truth. Every color, font, radius, and motion
   value used in the app must reference one of these tokens.
   See DESIGN.md § 2.
   ============================================================ */

:root {
  /* ---------- Brand & primary ---------- */
  --primary:        #011E5C;   /* FundingShield navy */
  --primary-700:    #001344;   /* hover/pressed */
  --primary-50:     #f0f4fa;   /* tinted backgrounds (active nav, soft fills) */
  --primary-100:    #e8eef8;   /* slightly stronger tint (avatar marks, in-progress badge) */

  /* ---------- Ink (text) ---------- */
  --ink:            #0a2540;   /* strongest text — page titles, primary values */
  --ink-2:          #1a1f36;   /* default body text */
  --muted:          #6b7280;   /* secondary text — sub-labels, helper, placeholders on dark */
  --soft:           #8898aa;   /* tertiary text — uppercase eyebrows, table headers, chevrons */

  /* ---------- Surface ---------- */
  --bg:             #f7f8fb;   /* app background */
  --card:           #ffffff;   /* card / panel surface */
  --line:           #e9ecf2;   /* primary border (cards, inputs) */
  --line-2:         #eef1f6;   /* secondary divider (within-card section breaks, table rows) */

  /* ---------- Status (semantic) ---------- */
  --success:        #0fa968;
  --success-soft:   rgba(15,169,104,.10);
  --warning:        #eab308;
  --warning-dark:   #ca8a04;   /* warning text-on-soft */
  --warning-soft:   rgba(234,179,8,.12);
  --error:          #ef4444;
  --error-soft:     rgba(239,68,68,.10);
  --gray-soft:      rgba(107,114,128,.10); /* neutral pill background */

  /* ---------- HTTP method semantic (ApiDocumentation) ---------- */
  --method-get:     var(--success);
  --method-post:    var(--primary);
  --method-patch:   #7c3aed;     /* purple — used only on the API method badge */
  --method-debug:   var(--warning-dark);

  /* ---------- Type ---------- */
  --font-sans:  'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:  'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Type scale. Token name encodes the literal px value (e.g. --fs-14 = 14px,
     --fs-135 = 13.5px). Body default is --fs-14. See DESIGN.md § 3.1. */
  --fs-11:     11px;   /* eyebrow / nav-section caption */
  --fs-12:     12px;   /* meta, kpi-label, badge */
  --fs-125:    12.5px; /* sub-label, table sub-row */
  --fs-13:     13px;   /* secondary controls, breadcrumbs */
  --fs-135:    13.5px; /* button label, table cell */
  --fs-14:     14px;   /* body default */
  --fs-145:    14.5px; /* card title */
  --fs-15:     15px;   /* section title, brand name */
  --fs-17:     17px;   /* drawer header value */
  --fs-24:     24px;   /* page title */
  --fs-30:     30px;   /* KPI value */

  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-base:   1.5;

  --tracking-tight:    -0.02em;  /* large numerics (KPI value) */
  --tracking-title:    -0.015em; /* page titles */
  --tracking-eyebrow:  .08em;    /* uppercase nav-section, table header */
  --tracking-button:   normal;

  /* ---------- Spacing scale ---------- */
  --sp-1:  2px;
  --sp-2:  4px;
  --sp-3:  6px;
  --sp-4:  8px;
  --sp-5:  10px;
  --sp-6:  12px;
  --sp-7:  14px;
  --sp-8:  16px;
  --sp-9:  18px;
  --sp-10: 20px;
  --sp-12: 24px;
  --sp-14: 28px;
  --sp-16: 32px;
  --sp-20: 40px;

  /* ---------- Radius ---------- */
  --r-2:    4px;   /* tiny chips inside dense controls (kbd) */
  --r-3:    6px;   /* nav item, table cell, segmented inner */
  --r-4:    7px;   /* input, pill of secondary status */
  --r-5:    8px;   /* button, search input, segmented outer */
  --r-6:    10px;  /* card, kpi tile, dialog */
  --r-7:    12px;  /* dialog (large), uploader */
  --r-pill: 999px; /* badge, chip, progress bar */

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.04);
  --shadow-2: 0 6px 20px rgba(10,37,64,.06);
  --shadow-3: 0 12px 28px -10px rgba(10,37,64,.18),
              0 4px 10px -4px rgba(10,37,64,.10);
  --shadow-4: 0 16px 40px -16px rgba(10,37,64,.12);
  --shadow-5: 0 24px 60px rgba(10,37,64,.22);

  /* ---------- Layout ---------- */
  --layout-sidebar:           232px;
  --layout-sidebar-collapsed: 64px;   /* icons-only width when collapsed */
  --layout-topbar:            56px;
  --layout-content-max:   1480px;
  --layout-content-pad-x: 28px;
  --layout-content-pad-y: 24px;

  /* ---------- Motion ---------- */
  --dur-1:   .12s;   /* hovers, color shifts */
  --dur-2:   .15s;   /* small state changes */
  --dur-3:   .18s;   /* dialog/backdrop fade */
  --dur-4:   .22s;   /* drawer slide */
  --dur-5:   .35s;   /* progress fill, large transitions */
  --ease:    cubic-bezier(.2,.8,.2,1);

  /* ---------- Focus ring ---------- */
  --ring-primary: 0 0 0 3px rgba(1,30,92,0.10);
  --ring-error:   0 0 0 3px rgba(239,68,68,.10);
}