/* 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: robotpetfriends.com

   Sampled from the logo (docs/brand.md): three robot heads in circles, teal,
   yellow and coral, over a black wordmark. Dean, 2026-10-03: the buttons and the
   admin take a colour from the logo that no other affiliate site uses. Every
   sibling's button is orange (#e2661a, #d1410a), so the yellow it is, with the
   logo's own black on it, as the logo pairs them.

     #ffc000  the yellow robot           --cta: every buy button, and the admin's
                                         primary buttons (--admin-accent); black on it 10.6:1
     #23bdc3  the teal dog               too light for text (2.2:1), so
     #0a6f75  the same teal, darkened    --brand: links, active nav, accents (5.9:1)
     #ff634a  the coral cat              not used: it reads as the siblings' orange
     #000000  the wordmark               the pinned card ground, stepped (--pin-*)

   The yellow cannot carry white text or be text itself, so this site sets the
   two tokens site.css falls back from: --cta-ink (text on the button) and
   --cta-text (the button colour as text on white). A site that sets neither
   gets white on its button and its button colour as text, as before.

   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:      #0a6f75;   /* the logo's teal, darkened along its hue to 5.9:1 */
  --brand-soft: #eaf7f8;   /* the teal, lightened for a ground under text */
  --cta:        #ffc000;   /* the logo's yellow; #1a1a1a on this: 10.6:1 */
  --cta-dark:   #e6ad00;   /* hover, 8.6:1 */
  --cta-ink:    #1a1a1a;
  --cta-text:   #8a6400;   /* the yellow, darkened to 5.4:1 for a kicker on white */
  --cta-shadow: 0 1px 2px rgba(138,100,0,.22), 0 4px 14px rgba(138,100,0,.18);
  --focus:      #0a6f75;   /* a yellow ring is invisible on white */
  --admin-accent:     #ffc000;
  --admin-accent-ink: #1a1a1a;
  --star:       #f5a524;
  --star-empty: #d8d8d8;

  /* The pinned top pick: the wordmark's black, stepped, with the logo's teal and yellow. */
  --pin-1:      #111417;
  --pin-2:      #181c20;
  --pin-3:      #20262b;
  --pin-line:   #39424a;
  --pin-ink:    #f4f7f8;
  --pin-soft:   #c3ccd2;
  --pin-kick:   #23bdc3;   /* the logo's teal, 6.7:1 on --pin-3 */
  --pin-hover:  #ffc000;
  --mark:       #fff1c2;
  --scrim:      rgba(10,14,17,.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);
}