/* ============================================================
   Atlant — theme tokens (light default + dark) and the toggle.
   Loaded FIRST on every page so all other CSS + inline styles
   can reference these variables. Light is the default.
   ============================================================ */
:root{
  --bg:#F7F5F2;          /* page background (paper) */
  --surface:#FFFFFF;     /* cards */
  --surface-2:#F1EEE9;   /* subtle tiles / arrow chips */
  --band:#EDE8E1;        /* "How it works" tint band */
  --text:#15171C;        /* primary text */
  --text-2:#44474E;      /* strong body text */
  --muted:#6E6A63;       /* secondary text */
  --line:#E6E1D9;        /* hairlines / card borders */
  --line-2:#E1DBD1;      /* input + chip borders */
  --input-bg:#FAF8F5;    /* form fields */
  --ink:#14161B;         /* booking-band base */
  --ink-2:#15171C;       /* dark cards, panels, sidebar, utility bar */
  --footer:#0F1115;      /* footer */
  /* hero band — FLIPS with the theme (light section in light mode) */
  --hero-bg:#EAE5DD;
  --hero-text:#15171C;
  --hero-sub:#5C5F66;
  --hero-border:#D8D1C6;
  --hero-chip:rgba(0,0,0,.05);
  --accent:#E11414;
  --accent-deep:#B00F0F;
  color-scheme: light;
}
[data-theme="dark"]{
  --bg:#0F1115;
  --surface:#181B21;
  --surface-2:#232730;
  --band:#14161B;
  --text:#F3F1EE;
  --text-2:#D8D6D1;
  --muted:#9C968E;
  --line:#2A2E36;
  --line-2:#2E323B;
  --input-bg:#1B1E25;
  --ink:#14161B;         /* booking band stays a dark CTA in both themes */
  --ink-2:#15171C;       /* dark panels/sidebar/util-bar */
  --footer:#0B0D11;      /* footer recedes (darkest) */
  /* hero band — dark with white text in dark mode */
  --hero-bg:#14161B;
  --hero-text:#FFFFFF;
  --hero-sub:rgba(255,255,255,.66);
  --hero-border:rgba(255,255,255,.18);
  --hero-chip:rgba(255,255,255,.05);
  color-scheme: dark;
}

/* ---- theme toggle (adapts to dark or light surroundings via currentColor) ---- */
.theme-toggle{ display:inline-flex; gap:2px; align-items:center; border:1px solid color-mix(in srgb, currentColor 28%, transparent); background:color-mix(in srgb, currentColor 8%, transparent); border-radius:999px; padding:2px; }
.theme-toggle button{ display:grid; place-items:center; width:28px; height:24px; padding:0; border:0; border-radius:999px; background:transparent; color:inherit; opacity:.6; cursor:pointer; transition:opacity .15s, background .15s; }
.theme-toggle button:hover{ opacity:1; }
.theme-toggle button[aria-pressed="true"]{ background:var(--accent); color:#fff; opacity:1; }
.theme-toggle svg{ display:block; }
/* mobile-menu variant: a labelled row */
.theme-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 6px; border-bottom:1px solid var(--line); }
.theme-row span{ font-weight:600; font-size:16px; }

/* keep brand-logo chips readable in dark mode (logos need a light backing) */
[data-theme="dark"] .brandtile,
[data-theme="dark"] .brandcard,
[data-theme="dark"] .logo-card{ background:#fff !important; border-color:#E6E1D9 !important; }
[data-theme="dark"] .brandcard span,
[data-theme="dark"] .logo-card > div{ color:#15171C !important; }