/* ═══════════════════════════════════════════════════
   Design Tokens — shared across ALL versions
   Import this first in every version's index.html
═══════════════════════════════════════════════════ */
:root {
  /* ── Brand ── */
  --color-brand:        #2563EB;
  --color-brand-hover:  #1D4ED8;
  --color-brand-light:  #EFF6FF;
  --color-brand-border: #BFDBFE;
  --color-brand-text:   #1D4ED8;

  /* ── Neutrals ── */
  --color-ink:       #111827;   /* headings, body */
  --color-ink-dark:  #0D1117;   /* dark backgrounds */
  --color-ink-mid:   #1F2937;   /* dark surface */
  --color-ink-soft:  #374151;   /* secondary body */
  --color-muted:     #6B7280;   /* captions, labels */
  --color-subtle:    #9CA3AF;   /* placeholders */
  --color-divider:   #E9ECEF;   /* borders */
  --color-border:    #F3F4F6;   /* hairlines */
  --color-surface:   #F8F9FA;   /* input bg, alt bg */
  --color-canvas:    #ffffff;   /* page bg */

  /* ── Semantic ── */
  --color-success:        #16A34A;
  --color-success-light:  #F0FDF4;
  --color-success-border: #DCFCE7;
  --color-warning:        #F59E0B;
  --color-warning-light:  #FFF7ED;
  --color-warning-border: #FEF3C7;
  --color-warning-text:   #92400E;
  --color-error:          #DC2626;
  --color-error-light:    #FEF2F2;
  --color-error-border:   #FECACA;
  --color-teal:           #10B981;

  /* ── Decorative tile palettes (KPI tints, soft accent cards) ── */
  --color-peach-light:    #FFF1E6;
  --color-peach-border:   #FFE0CB;
  --color-cream-light:    #FEFCE8;
  --color-cream-soft:     #FFFCF2;
  --color-purple:         #8B5CF6;

  /* ── Typography ── */
  --font-family: 'Plus Jakarta Sans', sans-serif;

  --font-size-xs:  12px;
  --font-size-sm:  13px;
  --font-size-base: 14px;
  --font-size-md:  15px;
  --font-size-lg:  16px;
  --font-size-xl:  18px;
  --font-size-2xl: 22px;
  --font-size-3xl: 28px;

  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;
  --font-weight-black:     900;

  /* ── Spacing ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Border radii ── */
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* ── Shadows ── */
  --shadow-card:  0 1px 3px rgba(0,0,0,.05);
  --shadow-float: 0 4px 24px rgba(0,0,0,.06);
  --shadow-brand: 0 4px 20px rgba(37,99,235,.1);
  --shadow-hover: 0 4px 16px rgba(37,99,235,.1);

  /* ── Layout ── */
  --sidebar-width:    220px;
  --max-width-page:   920px;
  --max-width-pricing: 1060px;
  --max-width-shell:  1100px;
  --nav-height:       60px;
}