/* =============================================================
   RAYC design tokens — single source of truth for the revamp.

   Lifted from the hero (#rayc-hero-editorial in front-page.php) and the
   editorial header bar, which are the agreed design reference: every other
   section adapts to them, not the other way round.

   Note the swap this encodes. The old palette in tailwind.config.js calls
   `bccaccent #FFF0E4` the accent and the header CSS even labels it
   "champagne gold" — but it is a pale cream. The real gold was only ever
   used as hairline borders at low alpha. Here gold becomes the solid accent
   and the cream steps down to a light text tone.
   ============================================================= */
:root {
  /* ---- Accent ----
     Gold sits at hsl(40°) and the slate surface at hsl(207°) — 167° apart,
     near-complementary, so the champagne separates on hue as well as on value
     and needs no help to read as an accent. The bright tier below is therefore
     optional emphasis for calls to action, not a fix. (It existed as a fix
     while the surface was espresso at hsl(25°), only 15° from the gold, where
     the accent sank into the background.) */
  --rayc-gold:        #C6A664;  /* champagne — numerals, eyebrows, hairline accents */
  --rayc-gold-bright: #D9B871;  /* CTA tier — 9.6:1 on surface, reads as a signal   */
  --rayc-gold-lt:     #E3D2A4;  /* light gold — hover, secondary emphasis           */
  --rayc-sand:        #E7DCC4;  /* warm sand — nav links                            */
  --rayc-ivory:       #F4EFE3;  /* sail white — display headings                    */
  --rayc-cream:       #FFF0E4;  /* the former accent, now a light text tone         */

  /* ---- Surfaces: slate ----
     Measured against the hero photograph rather than chosen by feel. Sampling
     that image gives hsl(153°, 6%) overall and hsl(154°, 16%, 17%) along the
     bottom strip where it meets this surface — 70% of its pixels are near-grey,
     the rest clustering at 180° and 210°. So the picture is cool, dark and
     barely saturated, and the surface that continues it has to be the same.

     Slate at hsl(207°, 31%, 13%) sits 53° from that edge — close enough to read
     as one continuous world — while landing 167° from the gold and 61° from the
     sister site's forest green (#1A3325). Gold measures 7.0:1 here.

     Two earlier attempts are worth remembering. Espresso (hsl 25°) was 129° from
     the photograph: warm against cool, so the page visibly broke in two at the
     seam, and it sat only 15° from the gold, which flattened the accent. Navy was
     rejected for the same seam reason. Forest green matched the photograph best
     of all but collides with the sister brand. */
  --rayc-ink:       #101A24;   /* darkest — text sitting on gold   */
  --rayc-panel:     #0F1821;   /* deepest — menu sheet, panels     */
  --rayc-surface:   #16212A;   /* page surface                     */
  --rayc-raised:    #1F2C36;   /* cards lifted off the surface     */

  /* ---- Hairlines, tinted gold rather than plain white ---- */
  --rayc-line:      rgba(198, 166, 100, 0.18);
  --rayc-line-soft: rgba(198, 166, 100, 0.10);

  /* ---- Text ----
     Near-neutral rather than the warm cream/sand used before. On a warm surface,
     warm text makes every element share one hue and the page flattens into a
     single tonal wash — which is exactly what was happening. Holding body copy
     at a near-neutral off-white leaves gold as the only chromatic warm note on
     the page, so the accent carries weight without being made louder.
     Headings keep --rayc-ivory; only running text and labels go neutral. */
  --rayc-text:      rgba(233, 232, 230, 0.88);   /* 9.3:1 on surface */
  --rayc-text-dim:  rgba(233, 232, 230, 0.72);   /* 8.1:1 on surface */

  /* ---- Rhythm ----
     The hero sizes everything fluidly with clamp() while the sections below
     still step at breakpoints. These are the hero's own values, so sections
     that adopt them line up with it at every width. */
  --rayc-gutter:    clamp(1.75rem, 4vw, 4rem);   /* horizontal, matches hero */
  --rayc-section:   clamp(3.5rem, 7vw, 7rem);    /* vertical section rhythm  */
  --rayc-gap:       clamp(1.5rem, 2.6vw, 2.75rem);

  /* ---- Shape ---- */
  --rayc-radius-sm: 10px;
  --rayc-radius:    14px;
  --rayc-radius-lg: 22px;
  --rayc-pill:      999px;

  /* ---- Motion — the hero and header both settle on these ---- */
  --rayc-ease:      0.3s ease;
  --rayc-ease-slow: 0.35s ease;
  --rayc-lift:      -1px;      /* hover travel; the old sections used -4px */
}