/* Design tokens: "Caravan Night". Source of truth for STYLE_GUIDE.md. */
:root {
  /* night (backgrounds) */
  --night-950: #070B17;
  --night-900: #0B1124;
  --night-800: #121B36;
  --night-700: #1A2648;
  --night-600: #25345F;

  /* sand (text) */
  --sand-50:  #F6EEDF;
  --sand-300: #C9BBA0;
  --sand-500: #8E8370;

  /* copper (primary / CTA) */
  --copper-300: #F6CF79;   /* v3.3: the copper accent now follows the owner's gold logo (one accent, not two) */
  --copper-500: #E2A93B;
  --copper-700: #9A6416;

  /* turquoise (links / active / online) */
  --turq-300: #7FE3D6;
  --turq-500: #2BB8A6;
  --turq-700: #17786D;

  /* signal */
  --ember-500:   #E5533D;
  --saffron-400: #F2C94C;

  /* semantic */
  --bg:         var(--night-900);
  --bg-section: var(--night-800);
  --surface:    var(--night-700);
  --line:       var(--night-600);
  --text:       var(--sand-50);
  --text-2:     var(--sand-300);
  --text-3:     var(--sand-500);
  --accent:     var(--copper-500);
  --link:       var(--turq-500);
  --grad-copper: linear-gradient(180deg, var(--copper-300) 0%, var(--copper-500) 55%, var(--copper-700) 100%);
  --grad-sky:    radial-gradient(120% 80% at 50% 0%, #1E2C5A 0%, var(--night-900) 60%, var(--night-950) 100%);

  /* type */
  --font-display-ar: "El Messiri", "IBM Plex Sans Arabic", sans-serif;
  --font-head-ar:    "El Messiri", "IBM Plex Sans Arabic", sans-serif;
  --font-body-ar:    "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-head-en:    "Marcellus", Georgia, serif;
  --font-display-latin: "Marcellus", Georgia, serif; /* logo wordmark: Latin in every locale */
  --font-body-en:    "IBM Plex Sans", system-ui, sans-serif;

  --fs-hero:  clamp(2.5rem, 1.6rem + 4.5vw, 5.5rem);
  --fs-h2:    clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-h3:    clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  --fs-body:  1rem;
  --fs-small: .8125rem;

  /* spacing (4px base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

  --container: 1240px;
  --gutter: 16px;

  /* shape: two opposite corners cut at 45deg (the only container/button shape) */
  --cut: 18px;
  --cut-sm: 10px;
  --clip-cut: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  --clip-cut-sm: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm));

  /* z-index scale */
  --z-raised: 2;
  --z-header: 50;
  --z-drawer: 60;
  --z-grain: 70;

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 150ms;
  --t-base: 250ms;
  --t-reveal: 600ms;

  --glow-turq: 0 0 0 3px rgba(43, 184, 166, .25);
  --glow-copper: 0 6px 24px rgba(217, 130, 63, .35);
}

/* per-locale fonts (subsets checked on Google Fonts 2026-10-10).
   en / es / fil: Marcellus + IBM Plex Sans (latin, latin-ext), self-hosted in fonts.css.
   vi: Marcellus has no Vietnamese subset -> Cormorant (check before adding vi).
   zh = Simplified (zh-Hans), ko: Noto Serif + Noto Sans per script. ar: RTL, Arabic faces. */
:root { --font-display: var(--font-head-en); --font-head: var(--font-head-en); --font-body: var(--font-body-en); }
:lang(vi) { --font-display: "Cormorant", serif; --font-head: "Cormorant", serif; }
:lang(zh) { --font-display: "Noto Serif SC", serif; --font-head: "Noto Serif SC", serif; --font-body: "Noto Sans SC", sans-serif; }
:lang(ko) { --font-display: "Noto Serif KR", serif; --font-head: "Noto Serif KR", serif; --font-body: "Noto Sans KR", sans-serif; }
:lang(ar) { --font-display: var(--font-display-ar); --font-head: var(--font-head-ar); --font-body: var(--font-body-ar); }

@media (min-width: 768px) { :root { --gutter: 32px; } }

/* RTL: mirror the cut corners */
[dir="rtl"] {
  --clip-cut: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  --clip-cut-sm: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm)));
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-reveal: 0ms; }
}