/* ============================================================
   Warrant Design Tokens
   ------------------------------------------------------------
   Court document meets terminal.
   Stripe docs meets SEC filing meets monospace IDE.

   These tokens are LOCKED. Do not add accents, do not add
   gradients, do not add shadows. Status is communicated with
   the three accent colors only: warning (amber), error (red),
   success (emerald).
   ============================================================ */

:root {
  /* ---------- Color: backgrounds ---------- */
  --bg-base:        #0a0a0a;  /* pure black, primary background */
  --bg-raised:      #171717;  /* subtle elevation, e.g. card on bg */
  --bg-overlay:     #262626;  /* dialogs, hover surfaces */

  /* ---------- Color: borders ---------- */
  --border-dim:     #262626;  /* subtle frame, default borders */
  --border-mid:     #404040;  /* visible separator */
  --border-strong:  #525252;  /* table headers, focus context */

  /* ---------- Color: text ---------- */
  --text-primary:   #fafafa;  /* default body + headings */
  --text-secondary: #a3a3a3;  /* muted, captions, eyebrow labels */
  --text-tertiary:  #8e8e8e;  /* timestamps, metadata, disabled — bumped from #737373 for WCAG AA 4.5:1 on #0a0a0a */

  /* ---------- Color: accents (status only) ---------- */
  --accent-warning: #facc15;  /* "GAP", "ENFORCEMENT", "ACTIVE" */
  --accent-error:   #ef4444;  /* "₹250 CR penalty", validation */
  --accent-success: #10b981;  /* "LIVE", "satisfied", "verified" */

  /* ---------- Typography: families ---------- */
  --font-mono:  "JetBrains Mono", "IBM Plex Mono", Menlo, ui-monospace, monospace;
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", "Charter", "Iowan Old Style", "Source Serif 4", Georgia, "Times New Roman", serif;

  /* ---------- Typography: scale (1.25 ratio) ---------- */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  2rem;      /* 32px */
  --text-3xl:  2.5rem;    /* 40px */
  --text-4xl:  3.5rem;    /* 56px */
  --text-5xl:  5rem;      /* 80px */

  /* ---------- Typography: line heights ---------- */
  --leading-tight:  1.1;   /* display/hero */
  --leading-snug:   1.25;  /* headings */
  --leading-normal: 1.5;   /* body */
  --leading-relaxed: 1.7;  /* long-form reading */

  /* ---------- Typography: tracking ---------- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;  /* eyebrow labels (uppercase) */
  --tracking-wider:  0.08em;  /* metadata labels, all-caps */

  /* ---------- Spacing (4px base) ---------- */
  --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-14: 3.5rem;   /*  56px */
  --space-16: 4rem;     /*  64px */
  --space-20: 5rem;     /*  80px */
  --space-24: 6rem;     /*  96px */
  --space-32: 8rem;     /* 128px */

  /* ---------- Border radius (max 8px) ---------- */
  --radius-none: 0;
  --radius-sm:   2px;   /* tags, status pills */
  --radius-md:   4px;   /* buttons, inputs */
  --radius-lg:   8px;   /* cards (max) */

  /* ---------- Border widths ---------- */
  --border-1: 1px;
  --border-2: 2px;

  /* ---------- Layout ---------- */
  --container-max:  1200px;
  --reading-max:    720px;
  --bp-mobile:      640px;
  --bp-tablet:      768px;
  --bp-desktop:     1024px;
  --bp-wide:        1280px;

  /* ---------- Motion ---------- */
  --duration-color:   150ms;
  --duration-motion:  200ms;
  --ease-out:         cubic-bezier(0, 0, 0.2, 1);

  /* ---------- Focus ---------- */
  --focus-ring-color:  var(--text-primary);
  --focus-ring-width:  2px;
  --focus-ring-offset: 2px;

  /* ---------- Z-index scale ---------- */
  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   1000;
  --z-toast:   2000;
}