/* ===== Theme: dark + accent ===== */
:root {
  /* Backgrounds */
  --bg-primary: #0d0d0f;
  --bg-secondary: #141416;
  --bg-elevated: #1a1a1e;
  --bg-card: #161619;

  /* Text */
  --text-primary: #f0f0f2;
  --text-secondary: #9a9aa3;
  --text-muted: #6b6b73;

  /* Accent - teal/cyan (change to your preference) */
  --accent: #22d3c8;
  --accent-dim: #1aa89f;
  --accent-glow: rgba(34, 211, 200, 0.25);

  /* Borders & surfaces */
  --border: rgba(255, 255, 255, 0.06);
  --border-focus: var(--accent);

  /* Typography */
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

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

  /* Layout */
  --container: min(90vw, 1100px);
  --header-height: 4rem;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.35s;
  --duration-slow: 0.5s;
}