/* ==========================================================================
   Allan's ABC — design tokens
   Single source of truth for colour, type and spacing.
   Values traced to brand/BRAND.md. Change here, the whole site follows.

   PALETTE DIRECTION: Provence rosé. Salmon pink, awning yellow and
   sun-bleached cream, with a wine dark instead of a near-black. The logo's
   turquoise survives as an accent, not as a lead colour.
   ========================================================================== */

:root {
  /* --- Core palette --- */
  --abc-cream:  #FFF8EC;   /* sun-bleached linen. Never pure white.          */
  --abc-sand:   #F7E9D2;   /* warmer ground, borders, alternating sections   */
  --abc-blush:  #FFE6DC;   /* palest rosé, section grounds                   */
  --abc-rose:   #FFD2C4;   /* rosé in the glass                              */
  --abc-salmon: #FF9E86;   /* the everyday pink                              */
  --abc-coral:  #FF7B6B;   /* the brand board's coral. Buttons, the heart.   */
  --abc-yellow: #FFDB4D;   /* the awning                                     */
  --abc-wine:   #6E2B36;   /* the dark. A rosé bottle in shadow.             */
  --abc-ink:    #2A1A18;   /* warm near-black, never neutral grey            */

  /* Kept from the original brand board. Now an accent only: it is the colour
     of the logo script and the bar's paintwork, but it no longer leads. */
  --abc-teal:      #00928A;
  --abc-teal-dark: #00706A;

  /* Sun-faded aqua, the colour of the bar's paintwork after a summer. Used as
     a gradient on the header and footer so the page opens and closes on water
     rather than on a flat block.
       ink  on aqua-deep = 7.82:1     wine on aqua-deep = 4.78:1
     Do not push the ramp darker than aqua-deep: wine drops below 4.5:1. */
  --abc-aqua:       #8ED7D2;
  --abc-aqua-light: #A7E0DC;
  --abc-aqua-deep:  #7DBDB9;

  /* --- Derived support tones --- */
  --abc-coral-dark:  #D9503F;   /* decorative / large only on cream (3.85:1) */
  --abc-terracotta:  #A8382A;   /* link hover, 6.09:1 on cream               */
  --abc-yellow-dark: #EDB92C;
  --abc-wine-dark:   #4A1C24;
  --abc-ink-muted:   #6B564F;

  /* --- Semantic roles ---
     Text colours are pre-vetted for contrast. Use these, not the raw palette,
     for anything that carries words. See BRAND.md §1.4. */
  --bg:            var(--abc-cream);
  --bg-alt:        var(--abc-blush);
  --bg-invert:     var(--abc-wine);
  --text:          var(--abc-ink);          /* 15.79:1 on cream */
  --text-muted:    var(--abc-ink-muted);    /*  6.48:1 on cream */
  --text-invert:   var(--abc-cream);        /*  9.65:1 on wine  */
  --link:          var(--abc-wine);         /*  9.65:1 on cream */
  --link-hover:    var(--abc-terracotta);   /*  6.09:1 on cream */
  --rule:          var(--abc-sand);
  --kicker:        var(--abc-wine);         /*  9.65:1 on cream */

  /* Buttons. Ink on every one: coral 6.59, salmon 8.33, yellow 12.30.
     Light text on any of these fails, so never use it. */
  --btn-primary-bg:       var(--abc-coral);
  --btn-primary-bg-hover: var(--abc-salmon);
  --btn-primary-text:     var(--abc-ink);
  --btn-secondary-bg:     var(--abc-yellow);
  --btn-secondary-text:   var(--abc-ink);

  /* Header and footer both run the aqua gradient, so the page is bracketed by
     the same colour top and bottom. Text on them is ink; headings and links
     are wine. Both clear AA at the darkest end of the ramp.
     Swap --footer-grad for a flat colour if you ever want one; vetted flats,
     all with ink text: coral 6.59, salmon 8.33, yellow 12.30, blush 13.98. */
  --header-grad: linear-gradient(180deg, var(--abc-aqua-light), var(--abc-aqua));
  --footer-grad: linear-gradient(168deg,
                   var(--abc-yellow) 0%,
                   var(--abc-yellow) 44%,
                   var(--abc-yellow-dark) 100%);
  --footer-text: var(--abc-ink);

  /* --- Typography ---
     Bebas Neue for display, Montserrat for body: the pairing from the client's
     brand board. Fraunces was tried in its place and reverted; the condensed
     grotesque suits the shouty, all-caps voice better than a serif did.
     Amalfi Coast (the board's script) is commercial and not on Google Fonts,
     so Kaushan Script stands in for it. */
  --font-display: "Bebas Neue", "Oswald", Impact, sans-serif;
  --font-script:  "Kaushan Script", "Brush Script MT", cursive; /* for Amalfi Coast */
  --font-body:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Fluid scale. Bebas is narrow, so display sizes run large by design. */
  --fs-hero:  clamp(3.25rem, 11vw, 8.5rem);
  --fs-h1:    clamp(2.5rem, 7vw, 5rem);
  --fs-h2:    clamp(2rem, 5vw, 3.5rem);
  --fs-h3:    clamp(1.4rem, 3vw, 2rem);
  --fs-lead:  clamp(1.05rem, 1.9vw, 1.35rem);
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  /* Bebas is drawn tall and narrow: it needs open tracking and tight leading
     or a heading reads as one solid block. */
  --ls-display: 0.02em;
  --lh-display: 0.95;
  --lh-body:    1.65;

  /* --- Space (8px base) --- */
  --sp-1: 0.5rem;  --sp-2: 1rem;    --sp-3: 1.5rem;  --sp-4: 2rem;
  --sp-5: 3rem;    --sp-6: 4rem;    --sp-7: 6rem;    --sp-8: 8rem;

  --section-y: clamp(3.5rem, 9vw, 7rem);
  --gutter:    clamp(1.25rem, 5vw, 4rem);
  --maxw:      1240px;
  --maxw-text: 68ch;

  /* Width of the striped awning frame running down each side of the page. */
  --frame:      clamp(7px, 1.1vw, 15px);
  --frame-band: clamp(9px, 1.3vw, 16px);

  /* --- Form --- */
  --radius:    14px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --shadow:    0 4px 24px rgba(110, 43, 54, 0.10);
  --shadow-lg: 0 18px 48px rgba(110, 43, 54, 0.18);
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}