/* ============================================================
   Blackout Sportsfishing Cairns — Design Tokens
   Single source of truth for colour, type, space, radius,
   shadow and motion. Everything references these variables.
   ============================================================ */

:root {
  /* ---- Brand palette (client-specified) ---- */
  --chrome:    #1A1A23; /* near-black — header/footer/hero/dark bands (darkened 2026-07-10) */
  --surface:   #FFFEFD; /* soft white — main content backgrounds      */
  --primary:   #0196C4; /* mid blue — PRIMARY calls-to-action         */
  --secondary: #94CADF; /* light blue — secondary/detail/hover        */
  --deep:      #00355B; /* deep navy — ocean accent, links on light   */

  /* ---- Semantic roles ---- */
  --bg:          var(--surface);
  --bg-dark:     var(--chrome);
  --ink:         #22222D;   /* text on light                          */
  --ink-invert:  #FFFEFD;   /* text on dark                           */
  --muted:       #565E6E;   /* muted text on light (AA ~6:1)          */
  --muted-invert:#AEB8C6;   /* muted text on dark                     */
  --line:        #E4E7EC;   /* hairlines on light                     */
  --line-dark:   #34354A;   /* hairlines on dark                      */
  --link:        var(--deep); /* body links on light (AA ~7:1)        */
  --focus:       #0196C4;   /* focus ring                             */
  --tint:        #E4F1F7;   /* blue-washed light background (legacy)  */
  --icy:         #B6E8FC;   /* icy blue — headings/accents on dark    */

  /* ---- Ocean depth ladder: sections descend until the chrome floor ---- */
  --d1: #B6E8FC;            /* icy shallows — Who we are (dark text)  */
  --d2: #07698E;            /* first drop — Charters                  */
  --d3: #024E6F;            /* deeper — The Catch                     */
  --d4: #00355B;            /* deep — Gallery                         */
  --d5: #042B49;            /* darker — FAQ                           */
  /* contact + footer sit on --chrome: the black floor                */
  --panel: #0A4066;         /* raised cards/panels on dark            */
  --panel-ink: #12121A;     /* near-black panels — facts, cta band    */
  --panel-line: rgba(148, 202, 223, .16); /* hairlines on dark panels */
  /* legacy aliases (older rules reference these)                     */
  --sea-1: var(--d4); --sea-2: var(--d5); --sea-3: #071F35;

  /* ---- CTA ---- */
  --cta-bg:    var(--primary);
  --cta-ink:   #FFFFFF;
  --cta-hover: #0177A0; /* darkened primary for hover/active          */
  /* White-button hover: narrow slanted band, colours blended smoothly
     (chrome→mid→light), travels across slowly like a rolled page being
     pulled over the button; soft shadow on its leading (right) edge. */
  --band: linear-gradient(180deg, #22222D 0%, #0196C4 52%, #94CADF 100%);
  --band-shadow: 10px 0 18px rgba(0, 53, 91, .30);

  /* ---- Typography ---- */
  /* Logo-inspired trio: brush-script headings + sporty slab subheads + clean sans body */
  --font-heading: "Kaushan Script", "Segoe Script", cursive;        /* headings (like "Sportsfishing Cairns") */
  --font-subhead: "Zilla Slab", Georgia, "Times New Roman", serif;  /* subheadings, card titles (like "BLACKOUT") */
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;          /* body, buttons, labels */

  /* Fluid type scale */
  --fs-display: clamp(2.75rem, 7vw, 6rem);
  --fs-h1:      clamp(2rem, 4.5vw, 3.5rem);
  --fs-h2:      clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3:      clamp(1.15rem, 2vw, 1.5rem);
  --fs-script:  clamp(1.5rem, 3.2vw, 2.5rem); /* script at subheading scale */
  --fs-body-lg: 1.125rem;
  --fs-body:    1rem;     /* 16px min on mobile */
  --fs-small:   0.875rem;
  --fs-label:   0.75rem;  /* eyebrow */

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.6;
  --ls-label: 0.18em;     /* eyebrow letter-spacing */

  /* ---- Spacing scale (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;

  /* ---- Radius ---- */
  --r-sm: 4px; --r-md: 8px; --r-lg: 18px; --r-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-1: 0 1px 2px rgba(34,34,45,.08), 0 1px 3px rgba(34,34,45,.06);
  --shadow-2: 0 10px 30px rgba(0,53,91,.14);

  /* ---- Motion ---- */
  --dur: 220ms;
  --dur-band: 800ms;      /* slow, premium band travel */
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* ---- Layout ---- */
  --maxw: 1200px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --dur-band: 0ms; }
}