/* The palette, the type and the two column widths. THE ONLY FILE THAT DIFFERS
   BETWEEN SITES.

   site.css is copied byte for byte from one affiliate site to the next; this is
   where a new one becomes itself. Swapping these tokens changes every button,
   link, star, badge, pinned card and search highlight at once, which is the
   point: a literal colour anywhere in site.css is a colour that would stay
   WeKnowRice's on a site that is not WeKnowRice.

   tools/check_brand_tokens.php fails the build if one appears there.

   Site: shout4music.com
*/
/* Shout4Music — the design system.
   One file, cached a year, versioned from its mtime by asset().

   EVERY COLOUR HERE IS SAMPLED FROM THE LIVE SITE, not chosen. The old site
   runs the Kadence theme, which publishes its palette as CSS variables in the
   head of every page, so the blue, the inks, the rules and the page ground are
   the ones the site already has:

     --global-palette1  #2B6CB0   links, headings, the theme's own buttons
     --global-palette3  #222222   darkest ink
     --global-palette5  #515151   soft ink
     --global-palette7  #E1E1E1   rules
     --global-palette8  #F7F7F7   page ground
     --global-palette15 #f5a524   stars

   The buy colour is the exception and it is sampled too: the affiliate buttons
   in the posts are an inline gradient from rgb(255,105,0), and the theme's own
   accent for it is #f7630c. That orange is the one thing on the page that means
   "this costs money", so it is the only orange here and it is reserved for
   buying. Dean's instruction for this rebuild was the shared design with the
   button colours and the logo swapped (2026-09-07); this is that swap.

   LIGHT ONLY, deliberately, as on WeKnowRice: a second palette nobody checks is
   worse than no second palette. The live site is light too, so there is nothing
   to lose by it.

   No webfont: the system stack is a request and ~50 KB the reader does not wait
   for, and on a site judged by how fast a buy button appears that is the trade. */

:root {
  color-scheme: light;

  --bg:         #f7f7f7;   /* the live page ground, palette8 */
  --surface:    #ffffff;
  --surface-2:  #fbfbfb;
  --ink:        #222222;   /* palette3 */
  --ink-soft:   #515151;   /* palette5 */
  --ink-faint:  #6b6b6b;   /* palette6 darkened to 4.5:1 on --surface */
  --line:       #e1e1e1;   /* palette7 */
  --line-soft:  #efefef;

  --brand:      #2b6cb0;   /* the site's blue, for headings and links */
  --brand-soft: #eef4fb;
  /* The only orange on the site, reserved for buying.

     Taken from the darker half of the live buy button, which is an inline
     gradient from rgb(255,105,0) to rgb(207,46,46). The bright end of that
     gradient (#f7630c, and the theme's own accent) carries white text at
     3.1:1, and the button label is 16px bold, which WCAG counts as normal
     text needing 4.5:1. site.css sets the label to #fff and is copied byte
     for byte between sites, so the fix has to be here: this is the site's own
     orange, moved along its own gradient until the label is legible. */
  --cta:        #d1410a;   /* white on this: 4.70:1 */
  --cta-dark:   #ae3507;   /* hover, 6.34:1 */
  --star:       #f5a524;   /* palette15 */
  --star-empty: #d8d8d8;

  /* The pinned top pick's dark ground and the marks on a search hit. Tokens
     because they are TINTED, not neutral: left as literals they would stay warm
     brown on a site whose brand is blue, which is the whole failure mode this
     file exists to avoid. Derived from the brand blue rather than sampled: the
     old site has no dark card to sample, and a neutral charcoal next to a blue
     site reads as a mistake. */
  --pin-1:      #14263c;
  --pin-2:      #1c3654;
  --pin-3:      #23436b;
  --pin-line:   #33547d;
  --pin-ink:    #eff4fa;
  --pin-soft:   #b9c8da;
  --pin-kick:   #f9a466;
  --pin-hover:  #ffd7b4;
  --mark:       #ffeccb;
  --scrim:      rgba(12,18,26,.82);   /* the lightbox backdrop: cool, not neutral black */
  --bad-bg:     #fdecea;
  --bad-ink:    #8a2118;
  --good:       #13612e;   /* palette11 */
  --bad:        #b82105;   /* palette13 */

  --radius:     14px;
  --radius-sm:  9px;
  --wrap:       1250px;   /* masthead and footer */
  --content:    1000px;   /* 80% of it: the reading column (Dean, 2026-09-05) */
  --shadow:     0 1px 2px rgba(34,34,34,.05), 0 6px 20px rgba(34,34,34,.06);
  --shadow-lg:  0 2px 4px rgba(34,34,34,.06), 0 14px 40px rgba(34,34,34,.10);
}