/* ── Design Tokens ── */
:root {
  color-scheme: dark;

  /* Brand */
  --color-primary: #e09400;
  --color-primary-hover: #f0a52c;
  --color-primary-subtle: rgba(224, 148, 0, 0.12);

  /* Semantic */
  --color-danger: #ff4f6e;
  --color-success: #18c27a;

  /* Surfaces */
  --color-bg: #111;
  --color-bg-alt: #1a1a1a;
  --color-surface: #222;
  --color-surface-hover: #2a2a2a;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);

  /* Text */
  --color-text: #eee;
  --color-text-secondary: #999;
  --color-text-tertiary: #666;
  --color-text-on-primary: #111;

  /* 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 24px rgba(0, 0, 0, 0.5);

  /* Typography */
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-display: clamp(2rem, 4vw + 1rem, 3.25rem);
  --line-height: 1.6;
  --line-height-tight: 1.25;

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

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 100px;

  /* Transitions */
  --transition-fast: 120ms ease-out;
  --transition-md: 200ms cubic-bezier(0.33, 1, 0.68, 1);

  /* Z-index */
  --z-header: 200;
  --z-dropdown: 20;

  /* Layout */
  --container-max: 1100px;
  --nav-height: 56px;
}

/* ── Light Theme ── */
[data-theme="light"] {
  color-scheme: light;

  --color-primary: #c07800;
  --color-primary-hover: #d98a00;
  --color-primary-subtle: rgba(192, 120, 0, 0.1);

  --color-bg: #fff;
  --color-bg-alt: #f7f7f8;
  --color-surface: #f0f0f2;
  --color-surface-hover: #e8e8ea;
  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-strong: rgba(0, 0, 0, 0.14);

  --color-text: #111;
  --color-text-secondary: #555;
  --color-text-tertiary: #888;
  --color-text-on-primary: #fff;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* ── Base Reset ── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + var(--space-xl));
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--line-height);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-hover);
}

img,
svg {
  display: block;
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}