/* ============================================================
   TEAM COUNSEL OS — DESIGN TOKENS
   The single source of truth. Values live ONLY here.
   Never hardcode a color, space, radius, or shadow in a page
   or in styles.css — reference a token instead.
   Import order in HTML: tokens.css  →  styles.css  →  page
   ============================================================ */

:root {

  /* ---------- BRAND (from the official Brand Kit) ---------- */
  --tc-navy:      #1e3557;   /* primary / headings / dark surfaces */
  --tc-blue:      #3981ca;   /* action / links / accents */
  --tc-lime:      #dbe56c;   /* highlight / single accent only */
  --tc-grey:      #e2e2e2;   /* neutral borders / dividers */
  --tc-charcoal:  #2a2a2a;   /* deepest text / rare */

  /* ---------- BRAND DERIVATIVES (tints & states) ---------- */
  --tc-navy-700:  #182b47;
  --tc-blue-700:  #2f6fb0;   /* blue hover */
  --tc-blue-100:  #eaf2fb;   /* soft blue fill */
  --tc-blue-050:  rgba(57, 129, 202, 0.08);
  --tc-blue-border:#cfe1f5;
  --tc-lime-700:  #cfda5a;   /* lime hover */
  --tc-lime-100:  #f3f6dc;   /* soft lime fill */
  --tc-lime-glow: rgba(219, 229, 108, 0.25);

  /* ---------- SEMANTIC SURFACES & TEXT ---------- */
  --color-bg:           #f7f8fa;
  --color-surface:      #ffffff;
  --color-surface-alt:  #fbfcfe;
  --color-border:       #e8eaef;
  --color-border-strong:#d6dae2;
  --color-divider:      #ececf0;

  --color-text:         #1d2433;   /* body */
  --color-heading:      var(--tc-navy);
  --color-muted:        #697287;   /* secondary text */
  --color-soft:         #9aa3b4;   /* tertiary / captions */
  --color-link:         var(--tc-blue);

  /* ---------- STATUS ---------- */
  --color-danger:   #b23b2a;  --color-danger-bg:  #fde9e6;
  --color-success:  #5f7a1f;  --color-success-bg: #eef6e2;
  --color-info:     var(--tc-blue); --color-info-bg: var(--tc-blue-100);
  --color-neutral:  #5a6573;  --color-neutral-bg: #eceef2;

  /* ---------- TYPOGRAPHY ---------- */
  --font-heading: 'Sora', system-ui, sans-serif;
  --font-body:    'Figtree', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-display: clamp(34px, 4vw, 46px);
  --fs-h1: 30px;
  --fs-h2: 22px;
  --fs-h3: 18px;
  --fs-h4: 15px;
  --fs-body: 15px;
  --fs-sm: 13.5px;
  --fs-xs: 12px;
  --fs-eyebrow: 12px;
  --fs-lead: 16px;            /* lead paragraphs, subtitles, compact card titles */
  --fs-card-title: 20px;      /* standard card heading */
  --fs-card-title-lg: 26px;   /* primary / featured card heading */
  --fs-section-title: 23px;   /* slide-over / detail heading */
  --fs-page-title: 32px;      /* module page titles (all pages) */
  --fs-stat: 32px;            /* large metric numbers */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.55;
  --ls-tight: -0.02em;
  --ls-eyebrow: 0.16em;

  /* ---------- SPACING SCALE (4px base) ---------- */
  --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;

  /* ---------- RADII ---------- */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs: 0 1px 2px rgba(30, 53, 87, 0.05);
  --shadow-sm: 0 4px 14px rgba(30, 53, 87, 0.06);
  --shadow-md: 0 10px 24px rgba(30, 53, 87, 0.08);
  --shadow-lg: 0 20px 44px -22px rgba(30, 53, 87, 0.4);

  /* ---------- BORDERS ---------- */
  --bw: 1px;
  --border: var(--bw) solid var(--color-border);
  --border-strong: var(--bw) solid var(--color-border-strong);

  /* ---------- MOTION ---------- */
  --t-fast: 0.15s ease;
  --t-base: 0.2s ease;
  --t-slow: 0.3s ease;

  /* ---------- LAYOUT ---------- */
  --shell-max: 1280px;
  --shell-pad-x: 32px;
  --shell-pad-y: 28px;
  --topbar-h: 62px;

  /* ---------- EFFECTS / FOCUS / SCRIM ---------- */
  --scrim: rgba(30, 53, 87, 0.4);          /* every modal + overlay dim */
  --focus-ring: 0 0 0 3px var(--tc-blue-050); /* every input focus ring */
  --logo-sm: 24px;                          /* topbar wordmark */
  --logo-lg: 34px;                          /* loader + login wordmark */

  /* ---------- Z-INDEX ---------- */
  --z-base: 1;
  --z-sticky: 50;
  --z-dropdown: 100;
  --z-modal: 150;
  --z-toast: 200;
}