/* ============================================
   PixelCalm — Design Tokens
   ============================================ */

:root {
  /* ── Brand Colors ── */
  --color-primary: #7c5cfc;
  --color-primary-light: #9b82fd;
  --color-primary-dark: #5a3de8;
  --color-accent: #5ae4ff;
  --color-accent-light: #8aedff;
  --color-accent-dark: #2ab8d4;

  /* ── Semantic Colors ── */
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-error: #f87171;
  --color-info: #60a5fa;

  /* ── Background ── */
  --bg-primary: #020010;
  --bg-secondary: #0a0820;
  --bg-tertiary: #120e2e;
  --bg-card: rgba(18, 14, 46, 0.6);
  --bg-card-hover: rgba(28, 22, 62, 0.8);
  --bg-glass: rgba(18, 14, 46, 0.4);
  --bg-overlay: rgba(2, 0, 16, 0.85);

  /* ── Text ── */
  --text-primary: #e8e2f8;
  --text-secondary: rgba(200, 190, 230, 0.7);
  --text-muted: rgba(200, 190, 230, 0.45);
  --text-inverse: #020010;

  /* ── Borders ── */
  --border-subtle: rgba(124, 92, 252, 0.12);
  --border-default: rgba(124, 92, 252, 0.2);
  --border-hover: rgba(124, 92, 252, 0.35);
  --border-accent: rgba(90, 228, 255, 0.25);

  /* ── Glow & Shadow ── */
  --glow-primary: rgba(124, 92, 252, 0.3);
  --glow-accent: rgba(90, 228, 255, 0.2);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 40px var(--glow-primary), 0 0 80px var(--glow-accent);

  /* ── Typography ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 2rem;       /* 32px */
  --text-4xl: 2.5rem;     /* 40px */
  --text-5xl: 3.25rem;    /* 52px */
  --text-6xl: 4rem;       /* 64px */

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;

  /* ── 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;

  /* ── Radii ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* ── Layout ── */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1400px;

  --header-height: 64px;

  /* ── Z-Index ── */
  --z-base: 1;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-viewer: 400;
  --z-fullscreen: 500;
}

/* ── Breakpoints (documented, used via @media) ── */
/* sm:  640px  */
/* md:  768px  */
/* lg:  1024px */
/* xl:  1200px */
/* 2xl: 1400px */