/*
 * The one palette. Imported by the React app (frontend/src/styles.css) and linked by the server pages
 * (before static/css/tokens.css), so the app, sign-in, landing and tools pages never drift apart.
 * Each stylesheet maps its own variable names onto these.
 *
 * Colour canvas: Indigo for everything interactive, Violet beside it, Midnight for ink and the sidebar,
 * Lavender for tints, and Banana for the highlight (the sun on the canvas). Ember is for money only.
 * Banana is a fill, never text colour: put Banana ink on it. It marks what is new, current or celebrated.
 * It also declares the self-hosted fonts (Latin, two weights each). Light is the default; dark follows the system,
 * or `data-theme` on <html> (set before paint by static/js/theme.js).
 */
@font-face { font-family: "Instrument Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/spa/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/spa/fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/spa/fonts/newsreader-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/spa/fonts/newsreader-latin-600-normal.woff2") format("woff2"); }
:root {
  --sg-bg: #f2f1fd;          /* the page: a lavender wash, flat */
  --sg-panel: #ffffff;       /* surfaces you read on */
  --sg-panel-2: #f9f9ff;     /* a step off panel */
  --sg-ink: #0f1226;         /* Midnight */
  --sg-text-2: #393f63;
  --sg-muted: #565e84;
  --sg-faint: #6a7295;       /* placeholders only */
  --sg-line: #dcdcf3;        /* lavender hairline */
  --sg-line-soft: #ebebfa;
  --sg-brand: #4f46e5;       /* Indigo: 6.3:1 on white */
  --sg-brand-ink: #3730a3;   /* hover, and brand text on a tint */
  --sg-on-brand: #ffffff;
  --sg-violet: #6d5ef0;      /* beside indigo: second colour block, chart accents */
  --sg-on-violet: #ffffff;
  --sg-banana: #ffe135;      /* the highlight: fills only */
  --sg-banana-deep: #f2cc00; /* its hover and border */
  --sg-banana-ink: #2a2300;  /* text on banana: 14:1 */
  --sg-banana-tint: #fff7bf; /* a soft banana wash: selected chip, a callout */
  --sg-accent: #b4530a;      /* Ember: money only */
  --sg-ok: #2f7d5b; --sg-warn: #8a5a12; --sg-bad: #b42318;
  --sg-ok-tint: #e4f3ea; --sg-warn-tint: #fbf3e6; --sg-bad-tint: #fce9e7;
  --sg-info-tint: #ecebff; --sg-info-line: #d0d1f6;
  --sg-frost: #eeeefc;       /* neutral fill: tracks, tags, planned states */
  --sg-frost-2: #e5e4fd;     /* lavender: selected card, the pill in the cover */
  --sg-ring: rgba(79,70,229,.24);
  --sg-rail: #10143a;        /* the sidebar is Midnight in both themes */
  --sg-rail-ink: #f0f1fc; --sg-rail-text: #b9bde4; --sg-rail-faint: #8a90bd;
  --sg-rail-line: rgba(255,255,255,.10); --sg-rail-hover: rgba(255,255,255,.07);
  --sg-rail-on: rgba(129,140,248,.2); --sg-rail-mark: #ffe135;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sg-bg: #0a0d20; --sg-panel: #121631; --sg-panel-2: #171c3b;
    --sg-ink: #eceefb; --sg-text-2: #c6cae6; --sg-muted: #9aa1c6; --sg-faint: #868db3;
    --sg-line: #262d5a; --sg-line-soft: #1c2245;
    --sg-brand: #8b8ff8; --sg-brand-ink: #b0b3ff; --sg-on-brand: #0b0d24;
    --sg-banana-tint: #3a3410;
    --sg-accent: #e8853a; --sg-ok: #5cc08e; --sg-warn: #e0a84a; --sg-bad: #f0776c;
    --sg-ok-tint: #12301f; --sg-warn-tint: #33260c; --sg-bad-tint: #3a1a18;
    --sg-info-tint: #1c2156; --sg-info-line: #2c3385;
    --sg-frost: #1a2044; --sg-frost-2: #232a62; --sg-ring: rgba(139,143,248,.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --sg-bg: #0a0d20; --sg-panel: #121631; --sg-panel-2: #171c3b;
  --sg-ink: #eceefb; --sg-text-2: #c6cae6; --sg-muted: #9aa1c6; --sg-faint: #868db3;
  --sg-line: #262d5a; --sg-line-soft: #1c2245;
  --sg-brand: #8b8ff8; --sg-brand-ink: #b0b3ff; --sg-on-brand: #0b0d24;
  --sg-banana-tint: #3a3410;
  --sg-accent: #e8853a; --sg-ok: #5cc08e; --sg-warn: #e0a84a; --sg-bad: #f0776c;
  --sg-ok-tint: #12301f; --sg-warn-tint: #33260c; --sg-bad-tint: #3a1a18;
  --sg-info-tint: #1c2156; --sg-info-line: #2c3385;
  --sg-frost: #1a2044; --sg-frost-2: #232a62; --sg-ring: rgba(139,143,248,.3);
  color-scheme: dark;
}