:root {
  --bg: #0A0B0D;
  --surface: #111317;
  --surface-2: #171A1F;
  --surface-3: #1F242B;
  --stroke: rgba(255, 255, 255, 0.08);
  --stroke-strong: rgba(255, 255, 255, 0.16);

  --ink: #F4F5F7;
  --ink-muted: #A0A6B0;
  --ink-dim: #6B7280;

  --accent: #FF8A1F;
  --accent-hi: #FFB347;
  --accent-deep: #C95A00;
  --accent-2: #34E5FF;
  --accent-2-deep: #0FB6CF;
  --danger: #FF4D4F;
  --ok: #2EE6A8;

  --grad-amber: linear-gradient(135deg, #FFB347 0%, #FF6A00 100%);
  --grad-cyber: linear-gradient(135deg, #34E5FF 0%, #5B8BFF 100%);
  --grad-hero: radial-gradient(120% 80% at 70% 0%, rgba(255, 138, 31, 0.18) 0%, rgba(10, 11, 13, 0) 55%),
               radial-gradient(80% 60% at 10% 100%, rgba(52, 229, 255, 0.10) 0%, rgba(10, 11, 13, 0) 60%);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  --container: 1200px;
  --container-tight: 920px;

  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(2.5rem, 6vw + 1rem, 5.5rem);
  --fs-h1: clamp(2rem, 3vw + 1rem, 3.5rem);
  --fs-h2: clamp(1.6rem, 1.6vw + 1rem, 2.5rem);
  --fs-h3: clamp(1.25rem, 0.6vw + 1rem, 1.6rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.6;

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;

  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 24px 60px rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 8px 28px rgba(255, 138, 31, 0.35);

  --header-h: 64px;
  --action-bar-h: 72px;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --bg: #F7F8FA;
    --surface: #FFFFFF;
    --surface-2: #F1F3F6;
    --surface-3: #E7EAF0;
    --stroke: rgba(0, 0, 0, 0.08);
    --stroke-strong: rgba(0, 0, 0, 0.16);
    --ink: #0A0B0D;
    --ink-muted: #4B5563;
    --ink-dim: #6B7280;
    --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.02) inset, 0 8px 24px rgba(20, 26, 36, 0.08);
    --shadow-2: 0 1px 0 rgba(0, 0, 0, 0.04) inset, 0 24px 60px rgba(20, 26, 36, 0.12);
  }
}

:root[data-theme="light"] {
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --surface-2: #F1F3F6;
  --surface-3: #E7EAF0;
  --stroke: rgba(0, 0, 0, 0.08);
  --stroke-strong: rgba(0, 0, 0, 0.16);
  --ink: #0A0B0D;
  --ink-muted: #4B5563;
  --ink-dim: #6B7280;
  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.02) inset, 0 8px 24px rgba(20, 26, 36, 0.08);
  --shadow-2: 0 1px 0 rgba(0, 0, 0, 0.04) inset, 0 24px 60px rgba(20, 26, 36, 0.12);
}