/* ============================================================================
   DESIGN TOKENS — NerdTech Dispo AI (2026-08-06)
   The single source of visual truth (see design/UI-STANDARD.md §3).
   shadcn-convention semantic layer: components reference ONLY these variables.
   Raw hex values or off-scale px spacing in app CSS are a defect.
   ========================================================================== */
:root {
  /* -- primitives: one neutral ramp (cool gray, slight blue temperature) ---- */
  --gray-0: #ffffff;  --gray-1: #f8fafc;  --gray-2: #f1f5f9;  --gray-3: #e2e8f0;
  --gray-4: #cbd5e1;  --gray-5: #94a3b8;  --gray-6: #64748b;  --gray-7: #475569;
  --gray-8: #334155;  --gray-9: #1e293b;  --gray-10: #0f172a;
  --brand-5: #eef2ff; --brand-6: #4f46e5; --brand-7: #4338ca; /* existing indigo, kept */
  /* green-6 darkened from #16a34a on 2026-08-07: it measured 3.30:1 on white, under the
     WCAG AA 4.5 floor, and it is the colour of the deal VALUE — the most important number
     on a card. #15803d measures 5.02:1 and also passes as a background under white text,
     so every use improves. Found by tests/ui-check.js, not by eye. */
  --green-1: #f0fdf4; --green-6: #15803d; --green-8: #166534;
  --red-1: #fef2f2;   --red-6: #dc2626;   --red-8: #991b1b;
  --amber-1: #fffbeb; --amber-5: #f59e0b; --amber-6: #d97706; --amber-8: #92400e;
  /* violet: the funnel's "viewed" encoding (the chips already used this hex raw) */
  --violet-6: #6d28d9;

  /* -- semantic colors (background/foreground pairs) ------------------------ */
  --background: var(--gray-1);
  --surface: var(--gray-0);            /* cards, panels */
  --foreground: var(--gray-10);        /* primary text */
  --muted-foreground: var(--gray-6);   /* secondary text */
  --faint-foreground: var(--gray-5);   /* tertiary/hint text */
  --primary: var(--brand-6);
  --primary-hover: var(--brand-7);
  --primary-foreground: #ffffff;
  --primary-soft: var(--brand-5);
  --border: var(--gray-3);
  --border-strong: var(--gray-4);
  --ring: var(--brand-6);
  --success: var(--green-6);  --success-soft: var(--green-1);  --success-strong: var(--green-8);
  --danger: var(--red-6);     --danger-soft: var(--red-1);     --danger-strong: var(--red-8);
  --warning: var(--amber-6);  --warning-soft: var(--amber-1);  --warning-strong: var(--amber-8);

  /* -- spacing scale (4px base — the ONLY legal gaps/margins/paddings) ------ */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px;

  /* -- type scale (~1.2 ratio) + two weights -------------------------------- */
  --text-xs: 12px; --text-sm: 14px; --text-base: 16px;
  --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px;
  --weight-normal: 400; --weight-bold: 600;

  /* -- radii from one base + elevation scale -------------------------------- */
  --radius: 8px;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-lg: calc(var(--radius) + 4px);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 2px 6px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .06);

  /* -- layout caps (UI-STANDARD A3/A5) -------------------------------------- */
  --width-detail: 960px;   /* detail/reading content */
  --width-form: 640px;     /* forms */
  --width-workspace: 1200px; /* the deal workspace main column */
}