/* ==================================================================
   tokens.css — Salmon Arm Tourism design tokens
   Teal-led palette (Kamloops-inspired warm-cream field). Orange is a
   rare accent only. See build spec §4.
================================================================== */

:root {
  /* ---- palette (sampled from brand sheet; "Sunset Yellow" hex corrected) ---- */
  --ida-blue: #006975;        /* ANCHOR: headers, footer, headings, links, primary buttons */
  --ida-blue-deep: #004852;   /* darker teal for hover/contrast */
  --lakeshore: #BBDDE6;       /* soft support: washes, cards, dividers */
  --lakeshore-soft: #DCEEF2;
  --sunset: #EFA63E;          /* warm secondary: highlights, small fills, hover warmth */
  --sunset-deep: #D98E22;
  --orange: #FF5C39;          /* ACCENT ONLY: hero CTA, active nav, key highlight */
  --orange-deep: #E8431F;
  --cream: #FAF7F2;           /* page field (warm off-white) */
  --cream-deep: #F1EADF;      /* alternate section wash */
  --paper: #FFFFFF;
  --ink: #13302E;             /* body text — deep teal-black, not pure black */
  --ink-soft: #4A5B59;
  --line: #E4DFD6;            /* hairline dividers on cream */

  /* ---- type ---- */
  --font-display: 'Block Berthold', 'Fredoka', system-ui, sans-serif;
  --font-subhead: 'Amsi Pro Narrow Black', 'Saira Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Lato', system-ui, sans-serif;

  /* fluid type scale */
  --fs-display: clamp(2.75rem, 6vw, 5.5rem);
  --fs-h1: clamp(2rem, 4vw, 3.25rem);
  --fs-h2: clamp(1.5rem, 2.6vw, 2.25rem);
  --fs-h3: clamp(1.2rem, 1.8vw, 1.5rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  /* ---- layout ---- */
  --container: 1480px;        /* matches the site-header content width */
  --container-narrow: 780px;  /* long-form prose */
  --gutter: clamp(1rem, 4vw, 3rem);
  --section-y: clamp(2.6rem, 5.5vw, 5rem);
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 10px 30px rgba(0, 40, 45, .12);
  --shadow-lg: 0 24px 60px rgba(0, 40, 45, .20);
  --shadow-sm: 0 4px 14px rgba(0, 40, 45, .10);
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* scrim used over any text-on-photo (the "faded image" brief) */
  --scrim: linear-gradient(to top, rgba(0, 40, 45, .78), rgba(0, 40, 45, .15) 55%, rgba(0, 40, 45, 0) 80%);
  --scrim-soft: linear-gradient(to top, rgba(0, 40, 45, .60), rgba(0, 40, 45, 0) 70%);

  --topbar-h: 34px;
  --header-h: 88px;
  --z-header: 100;
  --z-mega: 90;
  --z-drawer: 200;
  --z-overlay: 300;
  --z-toast: 400;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}