/* Spifix tokens: the one source for colour, type, space, shape and motion.
   Every surface reads these names; no other file holds a colour value. The one exception is
   the drawings in logo/, which repeat theirs because a picture file cannot read a stylesheet.
   A [data-theme] on any element re-scopes the palette, so a dark panel can sit on a light page. */

:root, [data-theme="light"] {
  color-scheme: light;

  /* Paper and ink */
  --page: #f3f1ec;          /* the ground */
  --card: #fbfaf7;          /* a surface on the ground */
  --ink: #1b1d1c;           /* text */
  --muted: #5d625f;         /* secondary text; the edge of a control */
  --line: #dcd8cf;          /* hairlines */
  --track: #e7e3da;         /* quiet fills, unfilled tracks */

  /* Pine: ours. A filled green thing is something Spifix is holding. It is the tick in the mark. */
  --accent: #1f5b45;        /* as text and stroke */
  --accent-fill: #1f5b45;   /* as a fill */
  --on-accent: #fff;
  --accent-soft: #e6efe9;   /* a green-tinted ground */
  --deep: #12392c;          /* the brand's own dark ground: a van, the app tile. Dark palette on it */

  /* Ochre: yours. The roof in the mark, your turn, and what is not yet proven. */
  --ochre: #755000;         /* as text */
  --ochre-fill: #b08122;    /* as a fill or an outline */
  --ochre-soft: #f6e9d5;    /* an ochre-tinted ground */

  /* Red: danger, and nothing else. */
  --red: #a5382b;    --red-soft: #f7e2dd;

  /* Violet: worked out by the agent rather than stated by a person. */
  --ai: #5b4bc4;  --ai-fill: #5b4bc4;  --ai-soft: #ece9fb;

  /* Chart series, in fixed order. Identity only; never a status. */
  --s1: #2a78d6;  --s2: #eb6834;  --s3: #1baf7a;  --on-s: #fff;

  --focus: var(--accent);
}

/* The dark palette, written twice: once for the system setting, once for the toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #121413;  --card: #1a1d1c;  --ink: #e8eae8;  --muted: #9aa19d;  --line: #2a2e2c;  --track: #262a28;
    --accent: #9fd4bd;  --accent-fill: #2c7a5c;  --on-accent: #fff;  --accent-soft: #1d2e27;
    --ochre: #e6b866;  --ochre-fill: #b08122;  --ochre-soft: #33290f;  --red: #f0988a;  --red-soft: #3a201b;
    --ai: #a99cff;  --ai-fill: #6c5cd6;  --ai-soft: #24203d;
    --s1: #3987e5;  --s2: #d95926;  --s3: #199e70;  --on-s: #fff;
    --focus: var(--accent);
  }
}
[data-theme="dark"] {
  color-scheme: dark;
  --page: #121413;  --card: #1a1d1c;  --ink: #e8eae8;  --muted: #9aa19d;  --line: #2a2e2c;  --track: #262a28;
  --accent: #9fd4bd;  --accent-fill: #2c7a5c;  --on-accent: #fff;  --accent-soft: #1d2e27;
  --ochre: #e6b866;  --ochre-fill: #b08122;  --ochre-soft: #33290f;  --red: #f0988a;  --red-soft: #3a201b;
  --ai: #a99cff;  --ai-fill: #6c5cd6;  --ai-soft: #24203d;
  --s1: #3987e5;  --s2: #d95926;  --s3: #199e70;  --on-s: #fff;
  --focus: var(--accent);
}

/* Type, hosted here: Latin, Greek and € only, weights 400 to 700.
   Commissioner draws its figures at different widths, so a column of numbers is set in Noto Sans. */
@font-face { font-family: "Commissioner"; src: url("fonts/commissioner.e865194f53.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("fonts/noto-sans.f7a4f66b12.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("fonts/noto-sans-italic.db07cf6c73.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

:root {
  --display: "Commissioner", "Noto Sans", sans-serif;
  --body: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Small steps where text is dense, long steps where it is display. */
  --text-xs: .75rem;   --text-s: .875rem;  --text-m: 1rem;  --text-l: 1.2rem;
  --text-xl: 1.55rem;  --text-2xl: 2.1rem;  --text-3xl: 2.9rem;
  --lh-tight: 1.2;  --lh-snug: 1.4;  --lh-body: 1.6;
  --ls-tight: -.02em;  --ls-caps: .08em;

  /* Space, on a 4px grid */
  --space-1: .25rem;  --space-2: .5rem;  --space-3: .75rem;  --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4rem;

  /* Shape: the softer the corner, the more it is meant to be touched. */
  --radius-tag: 4px;  --radius-box: 6px;  --radius-touch: 14px;  --radius-pill: 999px;
  --touch: 2.75rem;         /* the smallest thing a finger is asked to hit */

  /* Motion settles; it never bounces. */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-1: 150ms;  --dur-2: 250ms;  --dur-3: 500ms;
}