:root {
  color-scheme: light;

  --color-primary: #f9d423;
  --color-primary-hover: #f5c800;
  --color-primary-light: #fff6d5;
  --color-on-primary: #3a3a3a;

  --color-accent: #f28b1c;
  --color-accent-hover: #e07a0e;
  --color-accent-light: #fff0e0;

  --color-secondary: #3a3a3a;
  --color-on-secondary: #ffffff;

  --color-background: #f7f8fa;
  --color-surface: #ffffff;
  --color-surface-alt: #f0f2f5;
  --color-hero-dark: #1a1a2e;
  --color-hero-mid: #2d2d44;

  --color-text-primary: #3a3a3a;
  --color-text-secondary: #6b7280;
  --color-text-inverse: #ffffff;
  --color-text-muted: #9ca3af;

  --color-divider: #e5e7eb;
  --color-border: #d1d5db;

  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;

  --shadow-soft: 0 8px 24px rgba(58, 58, 58, 0.06);
  --shadow-medium: 0 4px 16px rgba(58, 58, 58, 0.1);
  --shadow-strong: 0 12px 32px rgba(58, 58, 58, 0.14);
  --shadow-header: 0 4px 20px rgba(0, 0, 0, 0.08);

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-full: 9999px;

  --container-max: 1200px;
  --header-height: 80px;
  --section-padding: clamp(4rem, 8vw, 7rem);
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}