/* ============================================================
   PRACTICALX — DESIGN TOKENS
   Single source of truth for brand colors, typography, spacing.
   Change here → updates everywhere.
   ============================================================ */

:root {

  /* ── COLORS ── */
  --color-bg:           #08080F;
  --color-surface:      #0F0F1A;
  --color-surface-2:    #141420;
  --color-surface-3:    #1A1A28;

  --color-accent:       #7B5CFA;
  --color-accent-dim:   rgba(123, 92, 250, 0.15);
  --color-accent-glow:  rgba(123, 92, 250, 0.25);
  --color-accent-hover: #6A4AE8;

  --color-accent2:      #00D4EE;
  --color-accent2-dim:  rgba(0, 212, 238, 0.12);

  --color-text:         #F0F0F8;
  --color-text-muted:   #B0B0C8;
  --color-text-dim:     #5A5A78;

  --color-border:       rgba(255, 255, 255, 0.06);
  --color-border-strong: rgba(255, 255, 255, 0.12);

  --color-green:        #00C896;
  --color-green-dim:    rgba(0, 200, 150, 0.12);
  --color-amber:        #F5A623;
  --color-amber-dim:    rgba(245, 166, 35, 0.12);
  --color-red:          #FF5C5C;

  /* ── TYPOGRAPHY ── */
  --font-display:       'Syne', sans-serif;
  --font-body:          'DM Sans', sans-serif;
  --font-mono:          'DM Mono', monospace;

  --font-size-xs:       clamp(11px, 1.2vw, 13px);
  --font-size-sm:       clamp(13px, 1.4vw, 15px);
  --font-size-base:     15px;
  --font-size-md:       clamp(16px, 1.8vw, 20px);
  --font-size-lg:       clamp(18px, 2vw, 22px);
  --font-size-xl:       clamp(20px, 2.5vw, 26px);
  --font-size-2xl:      clamp(24px, 3vw, 34px);
  --font-size-3xl:      clamp(32px, 4vw, 48px);
  --font-size-4xl:      clamp(44px, 5.5vw, 64px);
  --font-size-hero:     clamp(44px, 7vw, 84px);

  --font-weight-light:  300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold:   700;
  --font-weight-black:  800;

  --line-height-tight:  1.1;
  --line-height-snug:   1.3;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;
  --line-height-loose:  1.9;

  --letter-spacing-tight:  -1.5px;
  --letter-spacing-snug:   -0.5px;
  --letter-spacing-normal: 0px;
  --letter-spacing-wide:   0.5px;
  --letter-spacing-wider:  1.5px;
  --letter-spacing-widest: 2.5px;

  /* ── 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;
  --space-24:  96px;
  --space-32:  128px;

  /* ── RADIUS ── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 100px;

  /* ── SHADOWS ── */
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.2);
  --shadow-md:    0 4px 20px rgba(0,0,0,0.3);
  --shadow-lg:    0 8px 40px rgba(0,0,0,0.4);
  --shadow-glow:  0 8px 32px rgba(123,92,250,0.3);
  --shadow-glow-lg: 0 12px 48px rgba(123,92,250,0.4);

  /* ── TRANSITIONS ── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.2s ease;
  --transition-slow:   0.3s ease;

  /* ── LAYOUT ── */
  --max-width:         1100px;
  --nav-height:        72px;
  --section-padding-x: 60px;
  --section-padding-y: 100px;

  /* ── Z-INDEX ── */
  --z-base:     1;
  --z-above:    10;
  --z-nav:      100;
  --z-modal:    200;
  --z-toast:    300;
}

/* ── RESPONSIVE TOKEN OVERRIDES ── */
@media (max-width: 900px) {
  :root {
    --section-padding-x: 24px;
    --section-padding-y: 60px;
  }
}