/* Design tokens: every colour, font and shape the site uses.
   A re-theme only means editing this file. site.css never uses a raw colour.
   Light palette on :root; dark palette follows the visitor's system setting,
   or is forced with <html data-theme="dark"> / data-theme="light". */

:root {
  /* colours */
  --page: #ffd3e8;        /* page background */
  --plum: #4b1b4f;        /* main text, borders, shadows */
  --pink: #ff4fa3;        /* accent: buttons, logo X, drop cap */
  --bubble: #ffb3d6;      /* soft pink fills */
  --spritz: #ff8a3d;      /* orange: focus ring, gradients */
  --sun: #ffe066;         /* yellow: stickers, newsletter, random post */
  --rose: #e9a396;
  --card: #ffffff;        /* card background */
  --card-fg: #2b1530;     /* text on cards */
  --soft: #fff0f7;        /* quiet fills inside cards */
  --mut: #6e4a6c;         /* secondary text on the page */
  --link: #c1166f;        /* links and small labels */
  --on-pink: #2a0a22;     /* text on --pink */
  --on-sun: #3a1440;      /* text on --sun */
  --on-bubble: #3a1440;   /* text on --bubble */
  --on-bubble-link: #7a1450;
  --band: var(--plum);    /* dark band (SubscribeStar note) */
  --band-fg: var(--page);
  --band-border: var(--plum);
  --mega-accent: #ffffff; /* the X in the big wordmark */
  --mega-accent-shadow: var(--plum);
  --bubble-fill: rgba(255, 255, 255, .35);
  --chip-fill: rgba(255, 255, 255, .6);
  --input-bg: #ffffff;
  --input-fg: #2b1530;

  /* reading card (stories and posts) */
  --read-bg: #ffffff;
  --read-fg: #2a1a2e;
  --read-mut: #6b5870;
  --read-line: #f0d3e2;

  /* placeholder cover gradients (until real covers are in) */
  --cover-1: linear-gradient(170deg, #ffe066, #ffb36b 55%, #ff8fbf);
  --cover-2: linear-gradient(170deg, #ffc2e0, #ff6fb5 60%, #e83d92);
  --cover-3: linear-gradient(170deg, #ffd6cc, #e9a396 55%, #b9707e);
  --cover-old: linear-gradient(170deg, #2b1530, #6b2748);
  --dessert: linear-gradient(120deg, var(--spritz), var(--pink));
  --meter: linear-gradient(90deg, var(--spritz), var(--pink));

  /* type */
  --display: 'Fredoka', 'Baloo 2', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --body: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --text-size: 17px;
  --read-size: 1.15rem;   /* about 19.5px on the reading card */
  --read-measure: 62ch;

  /* shape */
  --border: 3px;
  --border-thick: 3.5px;
  --radius-card: 30px;
  --radius-panel: 34px;
  --radius-small: 22px;
  --radius-pill: 99px;
  --shadow: 0 8px 0 var(--plum);
  --shadow-small: 0 4px 0 var(--plum);
  --focus: var(--spritz);
  --page-width: 1080px;
  --gutter: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #2a0f2e; --plum: #ffd3e8; --pink: #ff6fb5; --bubble: #6a2a68; --spritz: #ff9a57;
    --card: #3a1a40; --card-fg: #fdeaf4; --soft: #4a2450; --mut: #dcb4d4; --link: #ff9ccc;
    --on-sun: #3a1440; --on-bubble: #fdeaf4; --on-bubble-link: #ffd3e8;
    --band: #150619; --band-fg: #fdeaf4; --band-border: var(--pink);
    --mega-accent: var(--pink); --mega-accent-shadow: #000;
    --bubble-fill: rgba(255, 255, 255, .06); --chip-fill: rgba(255, 255, 255, .6);
    --read-bg: #1f0b24; --read-fg: #fbeef6; --read-mut: #cfaec8; --read-line: #4a2450;
    --cover-old: linear-gradient(170deg, #1a0f24, #5b1d3a);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #2a0f2e; --plum: #ffd3e8; --pink: #ff6fb5; --bubble: #6a2a68; --spritz: #ff9a57;
  --card: #3a1a40; --card-fg: #fdeaf4; --soft: #4a2450; --mut: #dcb4d4; --link: #ff9ccc;
  --on-sun: #3a1440; --on-bubble: #fdeaf4; --on-bubble-link: #ffd3e8;
  --band: #150619; --band-fg: #fdeaf4; --band-border: var(--pink);
  --mega-accent: var(--pink); --mega-accent-shadow: #000;
  --bubble-fill: rgba(255, 255, 255, .06); --chip-fill: rgba(255, 255, 255, .6);
  --read-bg: #1f0b24; --read-fg: #fbeef6; --read-mut: #cfaec8; --read-line: #4a2450;
  --cover-old: linear-gradient(170deg, #1a0f24, #5b1d3a);
  color-scheme: dark;
}