/* ═══════════════════════════════════════════════════════
   ThreadSync Enterprise Design System — Theme Tokens
   v1.0 — The single source of truth for visual identity.
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Typography ── */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  --text-xs:   0.75rem;     /* 12px — labels, badges */
  --text-sm:   0.875rem;    /* 14px — captions, meta */
  --text-base: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);   /* 16→18 — body */
  --text-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);   /* 17→20 — lead paragraphs */
  --text-lg:   1.125rem;    /* 18px — card titles */

  --h1: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem);   /* 36→52 */
  --h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);        /* 24→32 */
  --h3: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);    /* 18→22 */

  --lh-body:  1.6;
  --lh-tight: 1.2;
  --lh-snug:  1.4;
  --measure:  72ch;   /* max line length for readability */

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --ls-tight:  -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-caps:    0.08em;

  /* ── Colors — Surface ── */
  --bg-page:    #08080a;
  --bg-subtle:  rgba(255,255,255, 0.02);
  --bg-muted:   rgba(255,255,255, 0.04);
  --bg-raised:  rgba(15,23,42, 0.5);

  --border-subtle:  rgba(255,255,255, 0.06);
  --border-default: rgba(255,255,255, 0.10);
  --border-strong:  rgba(255,255,255, 0.15);

  /* ── Colors — Text ── */
  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --text-faint:     #475569;

  /* ── Colors — Brand ── */
  --green:   #4ade80;
  --blue:    #60a5fa;
  --purple:  #a78bfa;
  --amber:   #fbbf24;
  --pink:    #f472b6;
  --red:     #f87171;
  --cyan:    #22d3ee;

  --green-bg:   rgba(74,222,128, 0.10);
  --blue-bg:    rgba(96,165,250, 0.10);
  --purple-bg:  rgba(167,139,250, 0.10);
  --amber-bg:   rgba(251,191,36, 0.10);
  --pink-bg:    rgba(244,114,182, 0.10);
  --red-bg:     rgba(248,113,113, 0.06);

  --green-border:   rgba(74,222,128, 0.25);
  --blue-border:    rgba(96,165,250, 0.25);
  --purple-border:  rgba(167,139,250, 0.25);
  --amber-border:   rgba(251,191,36, 0.25);

  /* ── Spacing ── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* ── Radii ── */
  --radius-sm:   0.5rem;    /*  8px */
  --radius-md:   0.75rem;   /* 12px */
  --radius-lg:   1rem;      /* 16px */
  --radius-pill: 100px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0, 0.12);
  --shadow-md:  0 4px 16px rgba(0,0,0, 0.20);
  --shadow-lg:  0 8px 32px rgba(0,0,0, 0.30);
  --shadow-glow-green:  0 0 24px rgba(74,222,128, 0.15);
  --shadow-glow-blue:   0 0 24px rgba(96,165,250, 0.15);
  --shadow-glow-purple: 0 0 24px rgba(167,139,250, 0.15);

  /* ── Transitions ── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
}