/* OSADO Design System */
:root {
  --font-display: "Syne", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --bg-void: #0c0a08;
  --bg-warm: #16110d;
  --bg-elevated: #1a1510;
  --fg-primary: #f3ebe0;
  --fg-muted: rgba(243, 235, 224, 0.68);
  --fg-subtle: rgba(243, 235, 224, 0.52);
  --fg-faint: rgba(243, 235, 224, 0.28);
  --accent: #c4a35a;
  --accent-soft: rgba(196, 163, 90, 0.75);
  --accent-press: #a8863f;
  --accent-glow: rgba(139, 90, 43, 0.18);
  --chocolate: #5c3a20;
  --danger: #b54a3c;
  --focus-ring: #c4a35a;
  --border-subtle: rgba(243, 235, 224, 0.1);
  --border-strong: rgba(243, 235, 224, 0.4);
  --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;
  --gutter-mobile: 20px;
  --gutter-tablet: 32px;
  --gutter-desktop: 48px;
  --content-max: 1280px;
  --content-narrow: 720px;
  --header-h-mobile: 56px;
  --header-h-desktop: 64px;
  --text-display-hero: 48px;
  --text-display-section: 32px;
  --text-title-m: 24px;
  --text-body: 16px;
  --text-body-s: 14px;
  --text-label: 12px;
  --text-button: 14px;
  --leading-display: 1;
  --leading-section: 1.05;
  --leading-title: 1.15;
  --leading-body: 1.5;
  --tracking-display: -0.02em;
  --tracking-label: 0.08em;
  --tracking-button: 0.04em;
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --duration-fast: 220ms;
  --duration-cinematic: 1100ms;
  --media-saturate: 0.8;
  --media-contrast: 1.04;
  --scrim-bottom: linear-gradient(180deg, rgba(12,10,8,0.05) 0%, rgba(12,10,8,0.25) 45%, rgba(12,10,8,0.88) 100%);
  --scrim-soft: linear-gradient(180deg, rgba(12,10,8,0.1), rgba(12,10,8,0.48));
  --shadow-soft: 0 24px 80px rgba(0, 0, 0, 0.35);
}
@media (min-width: 768px) {
  :root {
    --text-display-hero: 64px;
    --text-display-section: 40px;
    --text-title-m: 28px;
  }
}
@media (min-width: 1024px) {
  :root {
    --text-display-hero: 88px;
    --text-display-section: 56px;
    --text-title-m: 32px;
    --text-body: 18px;
    --text-body-s: 15px;
    --text-label: 13px;
    --text-button: 15px;
  }
}
@media (min-width: 1440px) {
  :root {
    --text-display-hero: 104px;
    --text-display-section: 64px;
    --text-title-m: 36px;
  }
}