/* ============================================
   VARIABLES — Design Tokens
   ============================================ */

:root {
  /* Colors — Backgrounds */
  --bg-primary: #09090b;
  --bg-secondary: #111113;
  --bg-card: #18181b;
  --bg-card-hover: #1f1f23;
  --border: #27272a;
  --border-subtle: #1e1e21;

  /* Colors — Text */
  --text-primary: #fafafa;
  --text-secondary: #71717a;
  --text-muted: #52525b;

  /* Colors — Accent */
  --accent: #00e5a0;
  --accent-hover: #00b37a;
  --accent-subtle: rgba(0, 229, 160, 0.08);
  --accent-border: rgba(0, 229, 160, 0.2);
  --accent-glow: rgba(0, 229, 160, 0.15);

  /* Colors — Code block */
  --code-keyword: #7aa2f7;
  --code-string: #00e5a0;
  --code-comment: #52525b;
  --code-bg: #0c0c0e;

  /* Typography — Font families */
  --font-display: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Typography — Font sizes */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.8125rem;  /* 13px */
  --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 */

  /* Typography — Heading clamp sizes */
  --h1-size: clamp(2.5rem, 5vw, 4.5rem);
  --h2-size: clamp(1.75rem, 3vw, 2.5rem);

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Layout */
  --container-max: 1200px;
  --container-padding: 1.5rem;
  --nav-height: 72px;
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-spring: 500ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 0 24px rgba(0, 229, 160, 0.1);
}