:root {

  /* ══════════════════════════════════════════════
     PALETTE — Moroccan Patinated Copper & Teal
     May 2026
     ══════════════════════════════════════════════ */

  /* ── Backgrounds ── */
  --color-bg-darkest:    #0e1f1f;   /* page header, nav, footer */
  --color-bg-dark:       #1a3535;   /* dark sections, modal card */
  --color-bg-mid:        #2e5c5c;   /* card hover, dividers */
  --color-bg-light:      #f2ede6;   /* light content sections */
  --color-bg-white:      #ffffff;   /* form fields, pure white */

  /* ── Text ── */
  --color-text-on-dark:  #f2ede6;   /* body text on dark bg */
  --color-text-on-light: #0e1f1f;   /* body text on light bg */
  --color-text-muted:    #537676;   /* secondary text, captions */
  --color-text-subtle:   #b3d1c9;   /* nav links, tertiary on dark */

  /* ── Accents ── */
  --color-gold:          #c09449;   /* primary — links, buttons, active states */
  --color-gold-dark:     #8a6830;   /* gold hover / gold on light bg */
  --color-copper:        #964f25;   /* secondary — badges, icons */
  --color-copper-light:  #c47a4a;   /* copper hover */

  /* ── Borders ── */
  --color-border-dark:   #2e5c5c;   /* borders on dark bg */
  --color-border-light:  #c8c0b4;   /* borders on light bg */
  --color-border-gold:   #c09449;   /* accent borders, focus rings */

  /* ── Gradients ── */
  --gradient-hero: linear-gradient(160deg, #0e1f1f 0%, #1a3535 60%, #2e5c5c 100%);

  /* ── Overlays / transparencies ── */
  --color-overlay:         rgba(14, 31, 31, 0.88);
  --color-divider-dark:    #2e5c5c;
  --color-divider-light:   #c8c0b4;

  /* ══════════════════════════════════════════════
     SEMANTIC ALIASES
     Kept for backward compat with existing markup
     ══════════════════════════════════════════════ */

  --color-midnight:    #0e1f1f;
  --color-deep:        #1a3535;
  --color-dark-navy:   #0e1f1f;
  --color-parchment:   #f2ede6;
  --color-cream:       #f2ede6;
  --color-ivory:       #f2ede6;
  --color-ink:         #0e1f1f;
  --color-navy:        #0e1f1f;
  --color-forest:      #1a3535;
  --color-slate:       #2e5c5c;
  --color-gold-muted:  #8a6830;
  --color-muted-teal:  #8a6830;
  --color-link-card:   #c09449;
  --color-on-dark:     #f2ede6;
  --color-on-dark-dim: rgba(179, 209, 201, 0.75);

  /* ── Semantic layout ── */
  --color-header-bg:   var(--color-bg-darkest);
  --color-footer-bg:   var(--color-bg-darkest);
  --color-content-bg:  var(--color-bg-light);
  --color-text:        var(--color-text-on-light);
  --color-modal-bg:    var(--color-bg-dark);
  --color-modal-text:  var(--color-text-on-dark);
  --color-btn-bg:      var(--color-gold);
  --color-btn-text:    var(--color-bg-darkest);
  --color-btn-hover:   var(--color-gold-dark);

  /* ══════════════════════════════════════════════
     TYPOGRAPHY
     ══════════════════════════════════════════════ */

  --font-heading: "Cinzel", serif;
  --font-body:    "Lora", serif;

  /* ── Type scale ── */
  --text-logo:    1.85rem;
  --text-h1:      clamp(2.5rem, 5vw, 5rem);
  --text-h2:      2.4rem;
  --text-h3:      1.25rem;
  --text-nav:     1.05rem;
  --text-body:    1rem;
  --text-btn:     0.9rem;
  --text-footer:  1rem;

  /* ══════════════════════════════════════════════
     SPACING
     ══════════════════════════════════════════════ */

  --gutter:        4vw;
  --gutter-mobile: 6vw;
  --space-xs:   8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  80px;
  /* Was referenced by about/terms/prices/contact/sounds/inquiry but never
     defined, so every declaration using it was invalid and the padding
     computed to 0. Defining it restores the intended spacing. */
  --space-2xl: 120px;
  --section-pad: 80px;

  /* ══════════════════════════════════════════════
     LAYOUT
     ══════════════════════════════════════════════ */

  --max-width:          1500px;
  --nav-height:          100px;
  --nav-height-mobile:    64px;

  /* ── Radii ── */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:   12px;
  --radius-pill: 300px;

  /* ── Shadows ── */
  --shadow-modal: 0 24px 72px rgba(0, 0, 0, 0.55);
  --shadow-card:  0  4px 24px rgba(0, 0, 0, 0.18);

  /* ── Transitions ── */
  --transition: 0.2s ease;
}