:root {
  --desco-navy: #071824;
  --desco-navy-2: #0B2433;
  --desco-teal: #0B3D4A;
  --desco-turquoise: #1AA7A1;
  --desco-turquoise-deep: #0E7C77;
  --desco-gold: #C9A24A;
  --desco-gold-soft: #E4C878;
  --desco-sand: #F4EDE3;
  --desco-sand-2: #E8DCC8;
  --desco-brick: #C4A574;
  --desco-ink: #0F172A;
  --desco-muted: #5B6775;
  --desco-paper: #FAF8F4;
  --desco-line: rgba(12, 36, 48, 0.12);
  --desco-white: #ffffff;
  --desco-danger: #B42318;
  --desco-success: #067647;

  --desco-font-heading: "Outfit", "Noto Sans SC", "Segoe UI", system-ui, sans-serif;
  --desco-font-body: "Noto Sans", "Noto Sans Arabic", "Noto Sans SC", "Segoe UI", system-ui, sans-serif;

  --desco-space-1: 4px;
  --desco-space-2: 8px;
  --desco-space-3: 16px;
  --desco-space-4: 24px;
  --desco-space-5: 32px;
  --desco-space-6: 48px;
  --desco-space-7: 72px;
  --desco-space-8: 96px;

  --desco-radius-sm: 8px;
  --desco-radius: 16px;
  --desco-radius-lg: 24px;

  --desco-shadow: 0 18px 40px rgba(7, 24, 36, 0.12);
  --desco-shadow-lg: 0 30px 70px rgba(7, 24, 36, 0.22);
  --desco-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --desco-duration: 220ms;
  --desco-container: 1760px;
  --desco-gutter: clamp(20px, 4.2vw, 88px);
  --desco-z-nav: 9000;
  --desco-z-modal: 10000;
  --desco-z-drawer-toggle: 10060;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --desco-duration: 1ms;
  }
}