:root {
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-text: #09090b;
  --color-text-muted: #52525b;
  --color-text-subtle: #a1a1aa;
  --color-border: #e4e4e7;
  --color-border-strong: #d4d4d8;
  --color-accent: #09090b;
  --color-accent-fg: #fafafa;
  --color-accent-hover: #27272a;
  --color-brand: #f0ae2c;
  --color-brand-deep: #b9780a;

  --color-gold: #f0ae2c;
  --color-gold-soft: #fef0d0;
  --color-gold-deep: #b9780a;
  --color-lavender: #7c5cff;
  --color-lavender-soft: #ece5ff;
  --color-lavender-deep: #4e2fda;
  --color-mint: #3fbf97;
  --color-mint-soft: #d7f5e9;
  --color-mint-deep: #1f8a6a;
  --color-coral: #ff6f61;
  --color-coral-soft: #ffe3df;
  --color-coral-deep: #d63c30;

  --gradient-hero:
    radial-gradient(60% 45% at 20% 25%, rgba(240, 174, 44, 0.28), transparent 60%),
    radial-gradient(55% 50% at 80% 20%, rgba(124, 92, 255, 0.22), transparent 65%),
    radial-gradient(50% 50% at 75% 75%, rgba(63, 191, 151, 0.18), transparent 70%),
    radial-gradient(45% 40% at 10% 85%, rgba(255, 111, 97, 0.16), transparent 75%);
  --gradient-gold: linear-gradient(135deg, #f0ae2c, #ff9f00);
  --gradient-lavender: linear-gradient(135deg, #7c5cff, #b794ff);
  --gradient-mint: linear-gradient(135deg, #3fbf97, #6fe1b8);
  --gradient-coral: linear-gradient(135deg, #ff6f61, #ff9a8a);
  --gradient-rainbow: linear-gradient(90deg, #f0ae2c, #ff6f61, #7c5cff, #3fbf97);

  --font-sans: "Inter", "Prompt", "Noto Sans JP", "Noto Sans SC", "Noto Sans KR", "Noto Sans Devanagari", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 17px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 40px;
  --text-4xl: 56px;
  --text-5xl: 72px;
  --text-6xl: 96px;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.04em;
  --tracking-snug: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-widest: 0.12em;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(9, 9, 11, 0.04);
  --shadow-md: 0 4px 12px rgba(9, 9, 11, 0.06);
  --shadow-lg: 0 12px 32px rgba(9, 9, 11, 0.08);
  --shadow-xl: 0 24px 64px rgba(9, 9, 11, 0.12);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 180ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;

  --max-width: 1200px;
  --gutter: 24px;

  color-scheme: light;
}

[data-theme="dark"] {
  --color-bg: #0a0a0a;
  --color-surface: #111111;
  --color-surface-elevated: #18181b;
  --color-text: #fafafa;
  --color-text-muted: #a1a1aa;
  --color-text-subtle: #71717a;
  --color-border: #27272a;
  --color-border-strong: #3f3f46;
  --color-accent: #fafafa;
  --color-accent-fg: #09090b;
  --color-accent-hover: #e4e4e7;
  --color-brand: #f5b83a;
  --color-brand-deep: #d99820;

  --color-gold: #ffc246;
  --color-gold-soft: rgba(240, 174, 44, 0.12);
  --color-lavender: #a48bff;
  --color-lavender-soft: rgba(124, 92, 255, 0.16);
  --color-mint: #4fd4a8;
  --color-mint-soft: rgba(63, 191, 151, 0.15);
  --color-coral: #ff8577;
  --color-coral-soft: rgba(255, 111, 97, 0.15);

  --gradient-hero:
    radial-gradient(60% 45% at 20% 25%, rgba(240, 174, 44, 0.22), transparent 60%),
    radial-gradient(55% 50% at 80% 20%, rgba(124, 92, 255, 0.28), transparent 65%),
    radial-gradient(50% 50% at 75% 75%, rgba(63, 191, 151, 0.18), transparent 70%),
    radial-gradient(45% 40% at 10% 85%, rgba(255, 111, 97, 0.18), transparent 75%);

  --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 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

@media (min-width: 768px) {
  :root {
    --gutter: 48px;
  }
}

@media (min-width: 1200px) {
  :root {
    --gutter: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}