@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400&family=Outfit:wght@600;700&display=swap');

:root {
  --bg: #0A0A0A;
  --bg-elev-1: #101010;
  --bg-elev-2: #141414;
  --bg-elev-3: #181818;

  --text: #FFFFFF;
  --text-muted: rgba(255, 255, 255, 0.66);
  --text-dim: rgba(255, 255, 255, 0.42);
  --text-faint: rgba(255, 255, 255, 0.28);

  --logo-tile-bg: #ffffff;
  --logo-tile-fg: #0a0a0a;

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-faint: rgba(255, 255, 255, 0.05);

  --accent: #3FE07A;
  --accent-soft: rgba(63, 224, 122, 0.12);
  --accent-border: rgba(63, 224, 122, 0.35);

  --warning: #F5A524;
  --warning-soft: rgba(245, 165, 36, 0.12);
  --danger: #FF4C4C;
  --danger-soft: rgba(255, 76, 76, 0.12);
  --info: #3F8DE0;
  --info-soft: rgba(63, 141, 224, 0.14);

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 9999px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 700ms;

  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-brand: 'Outfit', var(--font-sans);
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --container: 1120px;
  --gutter: 24px;
  --section-pad: clamp(56px, 9vw, 120px);

  --nav-h: 56px;
}

@media (max-width: 640px) {
  :root {
    --gutter: 20px;
    --nav-h: 52px;
  }
}