/* Apollonaut design tokens — measured from apollonaut.com (Nov 2026) and used by the prototypes.
   Three systems: attraction pages (.theme-attraction), home (.theme-home), dark drawer (.theme-drawer).
   Apply the class on <html> or a wrapper; the prototypes inline the same values on :root. */

:root {
  /* type */
  --font-serif: "Cormorant Garamond", Georgia, serif;          /* attraction headings, weight 600 only */
  --font-sans: "DM Sans", "Segoe UI", Arial, sans-serif;       /* everything else; home headings 700 */
  --h1-attraction: clamp(42px, 10.5vw, 68px);  /* lh .94, ls -1.2px */
  --h2-attraction: clamp(32px, 5.2vw, 46px);   /* lh 1.02, ls -0.7px */
  --h3-attraction: 26px;                       /* lh 1.1, ls -0.4px */
  --lead-attraction: clamp(20px, 5.2vw, 24px); /* serif 600, lh 1.15 */
  --h1-home: clamp(44px, 11vw, 84px);          /* sans 700, lh .98, ls -0.045em */
  --h2-home: clamp(30px, 6.2vw, 50px);         /* sans 700, lh 1.04, ls -0.035em */
  --eyebrow-attraction: 600 11px/1 var(--font-sans); /* uppercase, ls 3.4px */
  --eyebrow-home: 700 11px/1 var(--font-sans);       /* uppercase, ls .16em */
  --body: 15px;                                /* attraction; home 16px */
  --radius-card: 16px; --radius-button: 10px; --radius-chip: 999px;
  --gutter: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --max: 1160px;                               /* home 1180px */
  --bp-desktop: 900px;
  /* illustrations */
  --ill-cream: #fffbed; --ill-paper: #f4f0e4; --ill-dot: #d6cfbd; --ill-ink: #1b2e26;
  --ill-cobalt: #2b58d8; --ill-cobalt-dark: #1f3fae; --ill-yellow: #f3e37a; --ill-green: #2f5e45; --ill-green-2: #3f7a57;
  --ill-terracotta: #c47a4a; --ill-red: #c4473a; --ill-sand: #e3c97a; --ill-gold: #e3b84a; --ill-wood: #6b5a3e;
}

/* ---------- attraction pages: Majorelle page, booking steps, footer card ---------- */
body[class*="vm-page"], .theme-attraction {
  --ivory: #f9f7f1; --white: #fdfcf8; --tint: #efede5; --paper: #f4f0e4; --cream: #fffbed;
  --line: #ddd8ca; --line-2: #ded8c9;
  --navy: #071b32; --navy-2: #0b2744; --teal: #152e32;
  --cobalt-a: #0731c2; --cobalt-b: #0826aa; --cobalt: #0736c9;        /* button: linear-gradient(115deg, var(--cobalt-a), var(--cobalt-b)) */
  --gold: #a0833c; --gold-deep: #8b682b; --sun: #fec61d; --sand: #e3c97a; --pale-yellow: #f3e37a; --dot-green: #8a9a3a;
  --forest: #2a4238; --forest-deep: #1e342b;                            /* journey panel: linear-gradient(180deg,#2f5243 0%,#2a4238 55%,#233f33 100%) */
  --muted: #58606b; --muted-green: #3c5a4b; --ok: #1f7a46; --bad: #a33a2a;
  --text: var(--navy); --bg: var(--ivory); --header-bg: var(--navy); --header-text: #fff;
  --button-bg: linear-gradient(115deg, var(--cobalt-a), var(--cobalt-b)); --button-text: #fff;
  --selected: var(--navy); --chip-on: var(--sun); --rule: var(--gold);  /* gold rule: 44px × 2px */
}

/* ---------- home page ---------- */
body:not([class*="vm-page"]), .theme-home {
  --ivory: #f9f7f1; --white: #fffefa; --paper: #f4f0e4; --story: #eceee4; --line: #e5e7df; --line-2: #d9dcd2;
  --green: #183c34; --green-2: #284643; --green-3: #173a32; --ink: #19362f;
  --yellow: #f8e46c; --pale: #f9e88f; --creamtext: #fff7de; --eyebrow: #748278; --olive: #71814c; --muted: #5f6b66; --red: #c4473a;
  --text: var(--ink); --bg: var(--ivory); --header-bg: var(--white); --header-text: var(--ink);
  --button-bg: var(--yellow); --button-text: var(--green); --button-dark-bg: var(--green);
  --badge-bg: var(--green-3); --badge-text: var(--creamtext);   /* "Coming soon": 12px 700, padding 6px 12px, radius 20 */
  --filter: var(--green);                                        /* pills radius 24, active filled, inactive outlined */
}

/* ---------- mobile drawer (dark) ---------- */
.theme-drawer {
  --drawer: #0b1a30; --drawer-2: #10233d; --drawer-3: #152c4a;        /* home variant: #173a32 background */
  --line: rgba(255, 255, 255, 0.12); --line-2: rgba(255, 255, 255, 0.22);
  --text: #f3f1ea; --muted: #aab6c4; --sun: #f3c640; --sand: #e3c97a; --ok: #8fd4a8;
  --cobalt: #1a36c8; --cobalt-edge: #6f8bff;                           /* "Get tickets": bg cobalt, 1px edge, radius 10, 17px 700 */
}

/* ---------- shared component values ---------- */
body, .theme-attraction, .theme-home, .theme-drawer {
  --shadow-card: 0 14px 40px rgba(7, 27, 50, 0.08);
  --shadow-button: 0 8px 20px rgba(7, 49, 194, 0.18);
  --bar-height: 68px;             /* following bar; add padding-bottom to the page on phones */
  --tap: 44px;                    /* minimum tap target: quantity buttons, chips, times */
  --focus: 2px solid #0736c9;     /* :focus-visible outline, offset 3px */
}
@media (prefers-reduced-motion: reduce) { :root { --motion: 0; } }