/* ============================================================
   Swiss Holiday Co — Design Tokens
   Extracted from Figma Variables (file ZTeMVBQkB4qAO2EV8A1NEL).
   Names normalised from Figma "Surface/Teal/500" -> --surface-teal-500.
   This is the single source of truth for the theme; every component
   references these vars so a future CMS can re-theme by overriding them.
   ============================================================ */
:root {
  /* --- Primitive palette --------------------------------- */
  --teal-50:  #e0f1f3;
  --teal-100: #c7e5e9;
  --teal-500: #008a9c;   /* brand */
  --teal-600: #037483;
  --teal-700: #06606b;

  --navy-500: #002e5d;   /* primary */
  --navy-700: #002341;
  --navy-900: #001526;

  --red-500:  #e2231a;   /* Swiss flag / accent (from logo) */

  /* v8 extended surfaces */
  --gold-400: #f7c62f;
  --blue-50:  #f1f8fc;
  --blue-500: #89c2ea;
  --sand-50:  #fcfaf7;
  --sand-100: #f8f5ef;
  --sand-300: #e6ddd0;
  --sand-400: #d8c8b4;

  --neutral-white: #ffffff;
  --neutral-100:   #f8f8f7;
  --neutral-200:   #e3e3df;
  --neutral-400:   #a6a69f;
  --neutral-500:   #7c7c75;
  --neutral-600:   #62625c;

  /* --- Semantic aliases ---------------------------------- */
  --surface-default: var(--neutral-white);
  --surface-page:    var(--neutral-white);
  --surface-muted:   var(--neutral-100);
  --surface-sand:    var(--sand-50);
  --surface-sand-100:var(--sand-100);
  --surface-blue:    var(--blue-50);
  --surface-teal-50: var(--teal-50);
  --surface-brand:   var(--teal-500);
  --surface-primary: var(--navy-500);
  --accent-gold:     var(--gold-400);

  --text-primary: var(--navy-500);
  --text-body:    var(--neutral-600);
  --text-muted:   var(--neutral-500);
  --text-inverse: var(--neutral-white);
  --text-brand:   var(--teal-500);

  --border-default: var(--neutral-200);

  /* --- Spacing scale ------------------------------------- */
  --space-2:  2px;
  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --grid-gap: 24px;

  /* --- Radius (v8: Sm 4, Md 6, Lg 8, Panel 16) ----------- */
  --radius-sm:    4px;   /* buttons, chips */
  --radius-md:    6px;
  --radius-lg:    8px;
  --radius-panel: 16px;  /* cards, media panels */
  --radius-pill:  999px;

  /* --- Typography ---------------------------------------- */
  /* Azo Sans is the licensed display/nav face. Hanken Grotesk is a
     close free stand-in for the PoC — swap the @font-face in base.css
     for the licensed Azo Sans files when available. */
  --font-display: "Azo Sans", "Hanken Grotesk", system-ui, sans-serif;
  --font-body:    "Montserrat", system-ui, sans-serif;

  /* v8 type scale — Display 64/72 ls-1; H1 48/56; H3 24/32;
     H4 20/28; H5 18/26; H6 16/24; Body-MD 18/28; Body 16/24;
     Body-SM 14/20; Eyebrow 13/16 ls .8 */
  --fs-display:   64px;  --lh-display:   72px;  --ls-display: -1px;
  --fs-h1:        48px;  --lh-h1:        56px;
  --fs-h2:        48px;  --lh-h2:        56px;  /* section titles use H1 */
  --fs-h3:        24px;  --lh-h3:        32px;
  --fs-h4:        20px;  --lh-h4:        28px;
  --fs-h5:        18px;  --lh-h5:        26px;
  --fs-h6:        16px;  --lh-h6:        24px;
  --fs-lead:      18px;  --lh-lead:      28px;
  --fs-body:      16px;  --lh-body:      24px;
  --fs-body-sm:   14px;  --lh-body-sm:   20px;
  --fs-caption:   13px;  --lh-caption:   16px;  --ls-caption: 0.8px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* --- Layout -------------------------------------------- */
  --container-max: 1440px;  /* v8 canonical desktop frame (Home was dragged to 1224); content = 1280 */
  --container-pad: 80px;    /* desktop side gutter (Spacing/Section/Horizontal) */
  --hero-height:   720px;
  --section-pad:   96px;    /* Spacing/Section/Default */
  --section-pad-compact: 64px;
  --section-pad-tight:   32px;

  /* --- Effects ------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 6px 20px rgba(0,0,0,.12);
  --hero-scrim: linear-gradient(180deg, rgba(0,12,28,.10) 0%, rgba(0,12,28,0) 30%, rgba(0,12,28,.55) 100%);
}