/* SendMoreStuff's brand file: every token the UI kit draws with (kit/README.md lists them), light and dark, plus the few tokens of the brand's own
   content (the sticker edge, the received bubble, the display type). It holds values only: the kit's kit.css draws every shared part with them, and
   app.css draws the app's own content. STYLE.md is the master and lists every colour here; a colour lives only here, as a token with a dark value.
   It is loaded after kit.css and before app.css. */

:root {
  color-scheme: light dark;
  /* the type */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --heading-font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Arial Rounded MT Bold", system-ui, sans-serif;          /* rounded: card and popup headings, the wordmark, buttons, badges */
  --heading-case: none;
  --heading-spacing: -0.01em;
  /* the brand's colours */
  --accent: #ff4f9a;            /* Bubblegum: the main button, sent bubbles, the spinner */
  --accent-strong: #e8357f;     /* Bubblegum pressed */
  --on-accent: #13261a;         /* Kelp on Bubblegum */
  --link: #b0186a;              /* Raspberry: links and second buttons */
  --heading: #13261a;           /* card headings: Kelp */
  --highlight: #ffd84d;         /* Sunny: badges, the meter's middle */
  --danger: #c0263a;
  --on-danger: #ffffff;          /* writing on a filled Danger (pressed Delete) */
  /* the neutrals */
  --ink: #13261a;               /* Kelp: writing */
  --grey: #4e5e52;              /* Now: lines, notes, captions */
  --line: #d6e2c6;              /* quiet edges */
  --bg: #f7fbe9;                /* the page */
  --card: #ffffff;
  --field-line: #13261a;        /* the chunky outline of text boxes and dropdowns */
  /* messages and states */
  --ok: #1e7f45;
  --ok-bg: #e2f4e8;
  --ok-ink: #135c31;
  --err-bg: #fde4e8;
  --err-ink: #8e1428;
  --note-bg: #fff4c2;
  --busy-bg: #eef5dc;
  --changed-bg: #fff1a8;
  --disabled-bg: #eef2e6;
  --disabled-ink: #7d8a80;
  /* on the header (Kelp on Zest) */
  --on-header-soft: rgba(19, 38, 26, 0.10);
  --on-header-edge: rgba(19, 38, 26, 0.45);
  --on-header-press: rgba(19, 38, 26, 0.22);
  /* dots and the banner */
  --dot-off: #9aa79c;
  --dot-green: #1e7f45;
  --dot-amber: #d98a12;
  --dot-red: #c0263a;
  --banner-ink: #13261a;
  /* popups */
  --scrim: rgba(15, 26, 19, 0.55);
  --shadow: rgba(19, 38, 26, 0.35);
  --shadow-strong: rgba(19, 38, 26, 0.40);
  /* the header: Zest, Kelp writing, a Kelp line under it */
  --kit-header: #c6f135;
  --kit-on-header: #13261a;
  --kit-line: #13261a;
  --kit-sticky-bg: #ffffff;
  --kit-banner-ink: #c6f135;
  /* the brand's own content (app.css) */
  --edge: #13261a;              /* the sticker outline and its shadow */
  --bubble-in: #eef5dc;         /* messages we received */
  --on-highlight: #13261a;      /* writing on Sunny */
  --warn: #a3560a;              /* Needs Attention */
  --focus: #ff4f9a;             /* the keyboard focus ring */
  --sky: #8ed8ff;               /* Sky: the header and the icon in test mode */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sticker: 3px 3px 0 var(--edge);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #ff6fae;
    --accent-strong: #ff8dc2;
    --on-accent: #13261a;
    --link: #ff8dc2;
    --heading: #e8f3e0;
    --highlight: #ffe27a;
    --danger: #ff7083;
    --on-danger: #13261a;
    --ink: #e8f3e0;
    --grey: #a6b9a9;
    --line: #2c4434;
    --bg: #0f1a13;
    --card: #172a1e;
    --field-line: #6f8a76;
    --ok: #5bd68a;
    --ok-bg: #143222;
    --ok-ink: #9be8b8;
    --err-bg: #3d141b;
    --err-ink: #ffb3bf;
    --note-bg: #3a3110;
    --busy-bg: #22392a;
    --changed-bg: #4a400c;
    --disabled-bg: #1f3326;
    --disabled-ink: #6f8574;
    --on-header-soft: rgba(19, 38, 26, 0.10);
    --on-header-edge: rgba(19, 38, 26, 0.45);
    --on-header-press: rgba(19, 38, 26, 0.22);
    --dot-off: #6f8574;
    --dot-green: #5bd68a;
    --dot-amber: #f2a65a;
    --dot-red: #ff7083;
    --banner-ink: #13261a;
    --scrim: rgba(0, 0, 0, 0.65);
    --shadow: rgba(0, 0, 0, 0.60);
    --shadow-strong: rgba(0, 0, 0, 0.70);
    --kit-header: #b4e02a;
    --kit-on-header: #13261a;
    --kit-line: #050b07;
    --kit-sticky-bg: #172a1e;
    --kit-banner-ink: #b4e02a;
    --edge: #050b07;
    --bubble-in: #22392a;
    --on-highlight: #13261a;
    --warn: #f2a65a;
    --focus: #ff6fae;
    --sky: #6ec4f0;
  }
}

:root[data-theme="dark"] {
  --accent: #ff6fae;
  --accent-strong: #ff8dc2;
  --on-accent: #13261a;
  --link: #ff8dc2;
  --heading: #e8f3e0;
  --highlight: #ffe27a;
  --danger: #ff7083;
  --on-danger: #13261a;
  --ink: #e8f3e0;
  --grey: #a6b9a9;
  --line: #2c4434;
  --bg: #0f1a13;
  --card: #172a1e;
  --field-line: #6f8a76;
  --ok: #5bd68a;
  --ok-bg: #143222;
  --ok-ink: #9be8b8;
  --err-bg: #3d141b;
  --err-ink: #ffb3bf;
  --note-bg: #3a3110;
  --busy-bg: #22392a;
  --changed-bg: #4a400c;
  --disabled-bg: #1f3326;
  --disabled-ink: #6f8574;
  --on-header-soft: rgba(19, 38, 26, 0.10);
  --on-header-edge: rgba(19, 38, 26, 0.45);
  --on-header-press: rgba(19, 38, 26, 0.22);
  --dot-off: #6f8574;
  --dot-green: #5bd68a;
  --dot-amber: #f2a65a;
  --dot-red: #ff7083;
  --banner-ink: #13261a;
  --scrim: rgba(0, 0, 0, 0.65);
  --shadow: rgba(0, 0, 0, 0.60);
  --shadow-strong: rgba(0, 0, 0, 0.70);
  --kit-header: #b4e02a;
  --kit-on-header: #13261a;
  --kit-line: #050b07;
  --kit-sticky-bg: #172a1e;
  --kit-banner-ink: #b4e02a;
  --edge: #050b07;
  --bubble-in: #22392a;
  --on-highlight: #13261a;
  --warn: #f2a65a;
  --focus: #ff6fae;
  --sky: #6ec4f0;
}

/* Test mode (the server marks the page's <html> with the class dry): a Sky header, and the icon's background with it */
:root.dry { --kit-header: var(--sky); }