/* 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.

   Site: painfreeworking.com

   Sampled, not chosen (docs/brand.md). The old site runs Kadence with its
   default blue, which the logo never used; the logo is aubergine over teal on
   mint. This file carries the LOGO's colours into the chrome in place of the
   theme default. That is the one look decision in this rebuild, and it is put
   to Dean at gate two beside the old pages.

     #41213d  "Pain Free" in the logo       the pinned card ground (--pin-*)
     #5cb2a2  "Working", the blob           too light for text (2.5:1), so
     #2a7466  the same teal, darkened        --brand: links, active nav, accents (5.5:1)
     #cfe5e1  the mint blob                 --brand-soft is a lighter step of it
     #d1410a  the old buy gradient          --cta, as shout4music took it (white 4.7:1)
     #f5a524  Kadence palette15             stars

   Light only, and the system font stack, as on every site in the design. */

:root {
  color-scheme: light;

  --bg:         #f7f7f7;
  --surface:    #ffffff;
  --surface-2:  #fbfbfb;
  --ink:        #222222;
  --ink-soft:   #515151;
  --ink-faint:  #6b6b6b;
  --line:       #e1e1e1;
  --line-soft:  #efefef;

  --brand:      #2a7466;   /* the logo's teal, darkened along its hue to 5.5:1 */
  --brand-soft: #edf6f4;   /* the mint blob, lightened for a ground under text */
  --cta:        #d1410a;   /* white on this: 4.70:1 */
  --cta-dark:   #ae3507;   /* hover, 6.34:1 */
  --star:       #f5a524;
  --star-empty: #d8d8d8;

  /* The pinned top pick: the logo's aubergine, stepped. */
  --pin-1:      #2c1629;
  --pin-2:      #371c34;
  --pin-3:      #41213d;
  --pin-line:   #5c3a57;
  --pin-ink:    #f8f1f7;
  --pin-soft:   #d2bfcf;
  --pin-kick:   #a8cec7;   /* the logo's darker mint blob */
  --pin-hover:  #cfe5e1;   /* the mint */
  --mark:       #ffeccb;
  --scrim:      rgba(26,12,24,.82);
  --bad-bg:     #fdecea;
  --bad-ink:    #8a2118;
  --good:       #13612e;
  --bad:        #b82105;

  --radius:     14px;
  --radius-sm:  9px;
  --wrap:       1250px;
  --content:    1000px;
  --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);
}