/* Lost Code — design tokens */
:root {
  /* Surfaces */
  --color-bg: #0f0f11;
  --color-bg-elevated: #131317;
  --color-surface-glass: rgba(255, 255, 255, 0.04);
  --color-surface-glass-hover: rgba(255, 255, 255, 0.07);
  --color-border-glass: rgba(255, 255, 255, 0.08);
  --color-border-glass-strong: rgba(255, 255, 255, 0.12);

  /* Brand */
  --color-accent: #8f36ff;
  --color-accent-cyan: #37f0ff;
  --color-accent-gold: #f6c86a;
  --color-accent-soft: rgba(123, 44, 191, 0.35);
  --color-accent-glow: rgba(143, 54, 255, 0.62);
  --gradient-accent: linear-gradient(135deg, #c95cff 0%, #8f36ff 50%, #37f0ff 100%);

  /* Text */
  --color-text: rgba(255, 255, 255, 0.92);
  --color-text-muted: rgba(255, 255, 255, 0.55);
  --color-text-subtle: rgba(255, 255, 255, 0.38);

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --text-hero: clamp(2.25rem, 5.5vw + 1rem, 3.75rem);
  --text-h2: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
  --text-lead: clamp(1rem, 1.2vw + 0.85rem, 1.125rem);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --section-padding-y: clamp(3.5rem, 8vw, 6rem);

  /* Layout */
  --container-max: 72rem;
  --container-padding-x: clamp(1.25rem, 4vw, 2rem);
  --nav-height: 4.25rem;

  /* Effects */
  --radius-sm: 0.625rem;
  --radius-md: 1rem;
  --radius-lg: 1.25rem;
  --blur-glass: 20px;
  --shadow-glow: 0 0 40px -8px var(--color-accent-glow);
  --transition-fast: 180ms ease;
  --transition-base: 280ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 480ms cubic-bezier(0.22, 1, 0.36, 1);
}