/* ============================================================
   ClearStride Tools — Design Tokens
   Production-Grade Color System v1.0
   clearstridetools.com
   ============================================================ */

:root {
  /* ── Core Brand Colors ── */
  --color-dark-slate:   #1E293B;
  --color-slate:        #475569;
  --color-light-slate:  #9AA3B8;
  --color-off-white:    #F8FAFC;
  --color-white:        #FFFFFF;

  /* ── Accent ── */
  --color-amber:        #D97706;
  --color-amber-light:  #F59E0B;
  --color-amber-dark:   #B45309;

  /* ── Product Accents ── */
  --color-docs-blue:        #2563EB;
  --color-docs-blue-light:  #3B82F6;
  --color-docs-blue-bg:     #EFF6FF;
  --color-docs-blue-border: rgba(37, 99, 235, 0.2);

  --color-reqs-red:         #DC2626;
  --color-reqs-red-light:   #EF4444;
  --color-reqs-red-bg:      #FEF2F2;
  --color-reqs-red-border:  rgba(220, 38, 38, 0.18);

  /* ── Dark Mode Surfaces ── */
  --color-dark-bg:      #0E172A;
  --color-dark-card:    #1E253B;
  --color-dark-surface: #334155;
  --color-dark-footer:  #060D1A;

  /* ── Semantic UI ── */
  --color-success:      #16A34A;
  --color-success-bg:   rgba(22, 163, 74, 0.1);
  --color-success-border: rgba(22, 163, 74, 0.22);

  /* ── Border ── */
  --border-default:     rgba(71, 85, 105, 0.18);
  --border-dark:        rgba(255, 255, 255, 0.06);

  /* ── Spacing Scale (4px base) ── */
  --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;
  --space-24: 96px;

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 100px;

  /* ── Typography ── */
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', 'Fira Code', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   26px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  52px;
  --text-5xl:  64px;

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.1em;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.07);
  --shadow-md:  0 4px 20px rgba(0, 0, 0, 0.09);
  --shadow-lg:  0 16px 48px rgba(0, 0, 0, 0.13);
  --shadow-xl:  0 32px 80px rgba(0, 0, 0, 0.18);
  --shadow-blue: 0 4px 20px rgba(37, 99, 235, 0.25);
  --shadow-red:  0 4px 20px rgba(220, 38, 38, 0.22);
  --shadow-amber: 0 4px 20px rgba(217, 119, 6, 0.30);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   220ms ease;
  --transition-slow:   350ms ease;

  /* ── Z-Index ── */
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;

  /* ── Layout ── */
  --max-width:        1100px;
  --nav-height:       64px;
  --section-padding:  96px;
}