/* ============================================================
   SettlementRadar — Design Tokens
   Stripe-inspired design language. Single source of truth
   for all CSS custom properties. Load BEFORE the master
   stylesheet so overrides resolve correctly.
   ============================================================ */

:root {

  /* ── Brand Colors ─────────────────────────────────────────── */

  /* Primary — Stripe Blue */
  --color-primary: #0570de;
  --color-primary-hover: #0353c3;
  --color-primary-light: #eef3fd;     /* tinted bg for badges, highlights */
  --color-primary-border: #c3d6f5;    /* borders on primary-light surfaces */
  --color-primary-dark: #0a2540;      /* darkest primary — Stripe navy */

  /* Secondary — Stripe Dark Navy */
  --color-secondary: #0a2540;

  /* Backgrounds */
  --color-bg: #ffffff;                /* clean white */
  --color-bg-alt: #f6f9fc;            /* Stripe light gray for sections */
  --color-bg-elevated: #ffffff;       /* elevated surfaces (cards, modals) */

  /* Text */
  --color-text: #0a2540;              /* Stripe dark navy for headings + strong copy */
  --color-text-body: #425466;         /* Stripe body text */
  --color-text-secondary: #425466;    /* muted / secondary copy */
  --color-text-placeholder: #aab7c4;  /* form placeholders */

  /* Borders */
  --color-border: #e6ebf1;            /* Stripe's border color */
  --color-border-focus: #0570de;      /* focused inputs */

  /* Semantic */
  --color-success: #09825d;
  --color-success-light: #e3f5ef;
  --color-warning: #d97706;
  --color-warning-light: #fef3c7;
  --color-danger: #c0392b;
  --color-danger-light: #fde8e6;
  --color-info: #0570de;
  --color-info-light: #eef3fd;

  /* ── Typography ───────────────────────────────────────────── */

  /* Base — Inter 14px */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-base: 14px;
  --line-height-base: 1.7;

  /* Heading scale */
  --font-size-h1: clamp(36px, 5vw, 52px);
  --font-size-h2: clamp(26px, 4vw, 38px);
  --font-size-h3: clamp(18px, 3vw, 26px);
  --font-size-h4: clamp(16px, 2.5vw, 19px);
  --font-size-h5: 15px;
  --font-size-h6: 13px;

  /* UI sizes */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;

  /* ── 8-Point Spacing Grid ─────────────────────────────────── */

  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-8:  64px;
  --space-10: 80px;
  --space-12: 96px;

  /* ── Border Radius ────────────────────────────────────────── */

  --radius-xs:   4px;    /* buttons, inputs — Stripe */
  --radius-sm:   6px;    /* cards, small surfaces — Stripe */
  --radius-md:   8px;    /* medium containers */
  --radius-lg:   12px;   /* large panels */
  --radius-xl:   16px;   /* modals, overlays */
  --radius-full: 999px;  /* pills */

  /* Semantic radius aliases */
  --radius-btn:  4px;    /* all buttons */
  --radius-card: 6px;    /* all cards */
  --radius-input: 4px;   /* form inputs */

  /* ── Shadows (Stripe-inspired) ────────────────────────────── */

  /* Stripe uses layered double shadows for depth */
  --shadow-sm:  0 2px 5px rgba(50, 50, 93, 0.07),
                0 1px 3px rgba(0, 0, 0, 0.07);

  --shadow-md:  0 4px 12px rgba(50, 50, 93, 0.08),
                0 2px 6px rgba(0, 0, 0, 0.06);

  --shadow-lg:  0 15px 35px rgba(50, 50, 93, 0.1),
                0 5px 15px rgba(0, 0, 0, 0.07);

  --shadow-xl:  0 20px 60px rgba(50, 50, 93, 0.12),
                0 10px 30px rgba(0, 0, 0, 0.08);

  /* Focus ring */
  --shadow-focus: 0 0 0 3px rgba(5, 112, 222, 0.15);

  /* ── Layout ───────────────────────────────────────────────── */

  --header-height: 64px;
  --container-max: 1200px;
  --container-sm:  800px;
  --container-lg:  1400px;

  /* ── Transitions ──────────────────────────────────────────── */

  --transition-fast:   0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow:   0.3s ease;

  /* ── Legacy variable aliases ──────────────────────────────── */
  /* Inline <style> blocks in legacy templates reference these.
     They resolve to the same Stripe token values above.       */
  --primary:       #0570de;
  --primary-dark:  #0353c3;
  --primary-light: #eef3fd;
  --sr-green-50:   #eef3fd;
  --sr-green-100:  #d3e9ff;
  --sr-green-300:  #93c5fd;
  --sr-green-800:  #0a2540;
}