/* ==========================================================================
   Chatsifieds design tokens  (v20261113-ds1)  -  the single source of truth.

   Loaded immediately BEFORE chatsifieds-culture-theme.css, i.e. after every
   page stylesheet, so the legacy aliases at the bottom win over older values.

   Colour roles (one job each):
     action   eucalypt green  every primary learning button
     link     ocean           links and information
     commerce ochre           sponsors, offers, "Sponsor this phrase" ONLY
     reward   wattle          streaks, stamps, focus ring (never text on it
                              unless --ds-on-reward)
   Do not stripe or band ochre + wattle + black together (flag protocols).

   Contrast (WCAG, calculated):
     light  white on action 5.13 | link on white 7.61 | white on commerce 5.81
            ink on cream 15.66 | muted on cream 7.76 | action on cream 4.91
     dark   text on bg 15.73 | muted on bg 9.29 | on-action on action 7.82
            link 9.21 | commerce 8.64 | reward 11.25

   Dark theme is OPT-IN with <html data-theme="dark">. It is not switched on by
   the visitor's system setting yet, because many pages still hard-code
   colours; it becomes automatic once the shared components (Phase 2) land.
   ========================================================================== */

:root{
  /* palette */
  --ds-forest:#073F35;      /* heading/ink green: flips light in dark mode */
  --ds-deep:#073F35;        /* dark band background: stays dark in both modes */
  --ds-band:#0D7C66;        /* far end of band gradients */
  --ds-on-deep:#FFFFFF;
  --ds-action:#0D7C66;
  --ds-on-action:#FFFFFF;
  --ds-link:#0B5A7A;
  --ds-commerce:#A8481F;
  --ds-on-commerce:#FFFFFF;
  --ds-reward:#F2B705;
  --ds-on-reward:#10231F;

  /* surfaces and text */
  --ds-bg:#FAFAF7;
  --ds-surface:#FFFFFF;
  --ds-soft:#E6F7F4;
  --ds-line:#CFE9E3;
  --ds-ink:#10231F;
  --ds-muted:#43534F;
  --ds-link-soft:#E4F2F7;
  --ds-commerce-soft:#FFF3E8;
  --ds-reward-soft:#FFF4CC;
  --ds-danger:#B42318;
  --ds-focus:#8A4B00;

  /* type: Playfair for H1/H2 only, Sora for everything else */
  --ds-font-display:'Playfair Display',Georgia,serif;
  --ds-font-body:'Sora',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ds-text-sm:.875rem;--ds-text-md:1rem;--ds-text-lg:1.125rem;
  --ds-text-xl:clamp(1.25rem,2.2vw,1.5rem);
  --ds-text-2xl:clamp(1.6rem,3.4vw,2.25rem);
  --ds-text-3xl:clamp(2.1rem,5vw,3.4rem);
  --ds-leading:1.6;--ds-measure:65ch;

  /* shape, depth, space */
  --ds-radius-sm:.75rem;--ds-radius-md:1rem;--ds-radius-lg:1.5rem;--ds-radius-pill:999px;
  --ds-shadow-sm:0 1px 2px rgba(7,63,53,.06),0 6px 18px rgba(7,63,53,.07);
  --ds-shadow-md:0 1px 2px rgba(7,63,53,.06),0 14px 36px rgba(7,63,53,.11);
  --ds-space-1:.25rem;--ds-space-2:.5rem;--ds-space-3:.75rem;--ds-space-4:1rem;
  --ds-space-5:1.5rem;--ds-space-6:2rem;--ds-space-7:3rem;--ds-space-8:4.5rem;
  --ds-tap:44px;
  --ds-content:76rem;--ds-reading:48rem;

  /* ---- legacy aliases: unify the competing greens and inks ------------ */
  --pw-green:var(--ds-action);          /* phrase-wall-page.css */
  --pw-dark:var(--ds-deep);
  --pw-deep:var(--ds-forest);
  --pw-ink:var(--ds-ink);
  --pw-muted:var(--ds-muted);
  --pw-mint:var(--ds-soft);
  --pw-cream:var(--ds-bg);
  --pw-line:var(--ds-line);
  --blog-green:var(--ds-action);        /* blog-theme.css */
  --csf-brand:var(--ds-action);         /* site-shell.css */
  --csf-brand-deep:var(--ds-forest);
  --csf-forest:var(--ds-forest);        /* culture theme */
  --brand:var(--ds-action);             /* business-pages.css */
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --ds-forest:#CFEDE4;
  --ds-deep:#0A2A23;
  --ds-band:#0F5C4C;
  --ds-action:#3FBFA3;
  --ds-on-action:#0C1A17;
  --ds-link:#7CC4E0;
  --ds-commerce:#F0A27A;
  --ds-on-commerce:#0C1A17;
  --ds-reward:#F5C842;
  --ds-on-reward:#0C1A17;
  --ds-bg:#0C1A17;
  --ds-surface:#12261F;
  --ds-soft:#173229;
  --ds-line:#24443A;
  --ds-ink:#E8F3EF;
  --ds-muted:#A9C0B8;
  --ds-link-soft:#14262E;
  --ds-commerce-soft:#2A1E17;
  --ds-reward-soft:#2A2510;
  --ds-danger:#F97066;
  --ds-focus:#F5C842;
  --ds-shadow-sm:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.3);
  --ds-shadow-md:0 1px 2px rgba(0,0,0,.3),0 14px 36px rgba(0,0,0,.4);
  /* legacy culture-theme variables, re-pointed for dark */
  --csf-ochre:var(--ds-commerce);--csf-ochre-soft:var(--ds-commerce-soft);--csf-ochre-line:#5A3A28;
  --csf-ocean:var(--ds-link);--csf-ocean-soft:var(--ds-link-soft);--csf-ocean-line:#2C5667;
  --csf-eucalypt:var(--ds-muted);--csf-eucalypt-soft:var(--ds-soft);
  --csf-bark:var(--ds-ink);--csf-wattle-soft:var(--ds-reward-soft);--csf-wattle-line:#6B5A1A;
  --pw-border:var(--ds-line);--pw-pale:var(--ds-soft);
}

/* One visible keyboard focus ring everywhere. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--ds-focus);outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}