:root {
  --surface: #f8f9fa;
  --surface-dim: #d9dadb;
  --surface-bright: #f8f9fa;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f3f4f5;
  --surface-container: #edeeef;
  --surface-container-high: #e7e8e9;
  --surface-container-highest: #e1e3e4;
  --on-surface: #191c1d;
  --on-surface-variant: #4d4635;
  --inverse-surface: #2e3132;
  --inverse-on-surface: #f0f1f2;
  --outline: #7f7663;
  --outline-variant: #d1c5af;
  --surface-tint: #755b00;
  --primary: #755b00;
  --on-primary: #ffffff;
  --primary-container: #fbcf56;
  --on-primary-container: #725800;
  --inverse-primary: #ecc14a;
  --secondary: #5f5e5e;
  --on-secondary: #ffffff;
  --secondary-container: #e2dfde;
  --on-secondary-container: #636262;
  --tertiary: #585f6c;
  --on-tertiary: #ffffff;
  --tertiary-container: #cdd4e4;
  --on-tertiary-container: #545b69;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
  --shadow-ambient: 0 4px 24px rgba(25,28,29,0.06);
  --shadow-hover: 0 8px 32px rgba(25,28,29,0.10);
  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  --space-unit: 8px;
  --container-max: 1280px;
  --gutter: 24px;
  --margin-desktop: 64px;
  --margin-mobile: 20px;
  --section-gap: 80px;
  --transition: 200ms ease-out;
  --sidebar-width: 220px;
}

.text-on-surface { color: var(--on-surface); }
.text-on-surface-variant { color: var(--on-surface-variant); }
.text-outline { color: var(--outline); }
.text-primary { color: var(--primary); }
.text-primary-container { color: var(--primary-container); }

.bg-surface { background-color: var(--surface); }
.bg-surface-container-low { background-color: var(--surface-container-low); }
.bg-surface-container { background-color: var(--surface-container); }
.bg-surface-container-lowest { background-color: var(--surface-container-lowest); }
.bg-primary-container { background-color: var(--primary-container); }

.rounded-xl { border-radius: var(--radius-xl); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded { border-radius: var(--radius); }

.shadow-ambient { box-shadow: var(--shadow-ambient); }
.shadow-hover:hover { box-shadow: var(--shadow-hover); }

.font-montserrat { font-family: 'Montserrat', sans-serif; }
.font-inter { font-family: 'Inter', sans-serif; }