/* The whole palette, in one place.
 *
 * Every colour Kindly draws (in CSS, on the flame canvas, and in the generated
 * icons) resolves to a token declared here. `tools/read-theme.js` parses this
 * file so Node can see the same values, which is why the channel triples below
 * are written as three plain numbers: `rgb(var(--x-rgb) / 0.4)` in CSS and
 * `rgba(r,g,b,0.4)` on a canvas both read one source.
 *
 * To change the theme: edit the tokens, then run `npm run icons`. That
 * regenerates the icon set and rewrites the two places a colour has to be
 * literal: `theme_color`/`background_color` in manifest.webmanifest and the
 * `theme-color` meta in index.html.
 *
 * Fonts are self-hosted: Figtree and Fraunces, both SIL OFL 1.1. See
 * site/fonts/README.md.
 */

/* ---------- Figtree, body ---------- */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/figtree-v9-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/figtree-v9-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Fraunces, display ----------
   One instance: opsz 9, wght 600, SOFT 100, WONK 0. The SOFT axis rounds the
   terminals, which is the whole reason it's here. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/fraunces-v38-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/fraunces-v38-600-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---------- Ground ---------- */
  --bg: #F6EDE7;
  --bg-rgb: 246 237 231;
  --bg-deep: #EFE3DA;
  --surface: #FFFBF8;        /* cards, sheets, lifted off the ground */
  --surface-sunk: #F4EBE3;   /* inputs, contact rows, pressed into it */

  /* The dark warm end of the palette. The page never uses it as a background:
     the flame turned out to read fine on light, so there is no pocket of night
     behind the candle, and the scrim and toast borrow it to sit over a light
     page without becoming another card. */
  --ember-pool-rgb: 42 27 18;
  --ember-pool-lift-rgb: 62 41 27;

  /* The ground the icons are drawn on: a warm dark between the page's cream and
     the ember pool the icons used to sit in, leaning to the dark side. Light
     enough that the tile reads as a lit room rather than a black square, dark
     enough that the flame, which ends in a near-white tip, has something to
     burn against. The lift is where its light pools, at the foot of the tile. */
  --icon-ground-rgb: 95 68 52;
  --icon-ground-lift-rgb: 128 94 70;

  /* ---------- Ink ---------- */
  --text: #2B211B;
  --text-rgb: 43 33 27;
  --text-dim: #6B584B;
  /* Darker than "faint" suggests. On a light ground this is 4.6:1, which 12px
     metadata needs; the dark theme's #6E6A63 would have been 2.7:1 here. */
  --text-faint: #756254;
  --hairline: rgb(var(--text-rgb) / 0.12);
  --hairline-strong: rgb(var(--text-rgb) / 0.22);

  /* ---------- Accent ----------
     Deliberately not the flame's amber. #FFB347 on this ground is 1.8:1,
     fine for fire, unreadable for a button or a selected tab. */
  --accent: #AD4F19;
  --accent-rgb: 173 79 25;
  --on-accent: #FFF8F3;

  /* ---------- Flame, frozen ----------
     These are the candle. They are not part of the theme and must not be
     retuned for a background; the ember pool exists so they never have to be. */
  --flame-deep-rgb: 242 140 56;
  --flame-mid-rgb: 255 179 71;
  --flame-core-rgb: 255 227 176;

  /* ---------- Wax ---------- */
  --wax-light-rgb: 255 246 235;
  --wax-mid-rgb: 228 212 193;
  --wax-dark-rgb: 198 176 153;
  --wax-rim-rgb: 255 250 243;
  --wax-well-rgb: 120 100 82;
  --wick-rgb: 74 58 46;

  /* ---------- Type ---------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* How lit the room is: 0.1 idle, 1 while a candle burns. Driven from
     app.js setWarmth(). */
  --warmth: 0.15;
}