/* Design tokens (docs/design/DESIGN.md). Light by default, dark via prefers-color-scheme. */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --bg: #F5F5F7;
  --card: #FFFFFF;
  --fill: #E9E9EE;
  --fill-soft: #F2F2F5;
  --separator: #E8E8ED;
  --text: #1C1C1E;
  --text-2: #6E6E73;
  --text-3: #C7C7CC;
  --control: #1C1C1E;
  --control-text: #FFFFFF;
  --chart: #6F7BEA;
  --chart-baseline: #EDEDF0;
  --chart-avg: #C7C7CC;
  --positive: #1F7A50;
  --positive-bg: #E4F6EC;
  --negative: #B4361F;
  --warn-bg: #FFF3DC;
  --warn-fg: #8A5300;
  --ok-bg: #E3F4E7;
  --ok-fg: #1B5E2F;
  --danger: #C4291C;
  --toggle-on: #34C759;
  --tabbar-bg: rgba(255, 255, 255, 0.84);
  --tabbar-shadow: 0 10px 30px rgba(0, 0, 0, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  --selected-pill: rgba(118, 118, 128, 0.14);
  --segment-on: #FFFFFF;
  --segment-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  --scrim: rgba(0, 0, 0, 0.4);
  --focus: #6F7BEA;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  --radius-hero: 24px;
  --radius-card: 20px;
  --radius-tile: 10px;
  --radius-pill: 8px;
  --page-pad: 16px;
  --section-gap: 22px;

  /* Category palette: fill (charts, bars), tint (icon tile), glyph (icon). */
  --cat-indigo-fill: #A5B0F7;   --cat-indigo-tint: #EEF0FE;   --cat-indigo-glyph: #4E5AD0;
  --cat-mint-fill: #8ED9B3;     --cat-mint-tint: #E4F6EC;     --cat-mint-glyph: #1F7A50;
  --cat-apricot-fill: #F7BC90;  --cat-apricot-tint: #FDEFE4;  --cat-apricot-glyph: #B4561A;
  --cat-sky-fill: #94D3E8;      --cat-sky-tint: #E3F4FA;      --cat-sky-glyph: #17718D;
  --cat-lavender-fill: #C6B5F4; --cat-lavender-tint: #F2ECFE; --cat-lavender-glyph: #6B45C8;
  --cat-slate-fill: #BCC4D0;    --cat-slate-tint: #EEF0F4;    --cat-slate-glyph: #4E5B72;
  --cat-grey-fill: #DCDCE1;     --cat-grey-tint: #F0F0F3;     --cat-grey-glyph: #6E6E73;
  --cat-coral-fill: #EE9A84;    --cat-coral-tint: #FDE9E6;    --cat-coral-glyph: #B4361F;
  --cat-amber-fill: #F7D28C;    --cat-amber-tint: #FFF3DC;    --cat-amber-glyph: #8A5300;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --card: #1C1C1E;
    --fill: #2C2C2E;
    --fill-soft: #2C2C2E;
    --separator: #38383A;
    --text: #F5F5F7;
    --text-2: #98989F;
    --text-3: #48484A;
    --control: #F5F5F7;
    --control-text: #000000;
    --chart: #8E98F2;
    --chart-baseline: #2C2C2E;
    --chart-avg: #636366;
    --positive: #5FD39A;
    --positive-bg: rgba(95, 211, 154, 0.16);
    --negative: #FF8A73;
    --warn-bg: #3A2C10;
    --warn-fg: #FFC56B;
    --ok-bg: rgba(95, 211, 154, 0.16);
    --ok-fg: #5FD39A;
    --danger: #FF6B5E;
    --toggle-on: #30D158;
    --tabbar-bg: rgba(30, 30, 32, 0.80);
    --tabbar-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
    --selected-pill: rgba(118, 118, 128, 0.32);
    --segment-on: #636366;
    --segment-shadow: none;
    --scrim: rgba(0, 0, 0, 0.6);
    --focus: #8E98F2;

    /* Dark: tint = fill at 22% over --card, glyph = fill. */
    --cat-indigo-tint: rgba(165, 176, 247, 0.22);   --cat-indigo-glyph: #A5B0F7;
    --cat-mint-tint: rgba(142, 217, 179, 0.22);     --cat-mint-glyph: #8ED9B3;
    --cat-apricot-tint: rgba(247, 188, 144, 0.22);  --cat-apricot-glyph: #F7BC90;
    --cat-sky-tint: rgba(148, 211, 232, 0.22);      --cat-sky-glyph: #94D3E8;
    --cat-lavender-tint: rgba(198, 181, 244, 0.22); --cat-lavender-glyph: #C6B5F4;
    --cat-slate-tint: rgba(188, 196, 208, 0.22);    --cat-slate-glyph: #BCC4D0;
    --cat-grey-tint: rgba(220, 220, 225, 0.16);     --cat-grey-glyph: #AEAEB2;
    --cat-coral-tint: rgba(238, 154, 132, 0.22);    --cat-coral-glyph: #EE9A84;
    --cat-amber-tint: rgba(247, 210, 140, 0.22);    --cat-amber-glyph: #F7D28C;
  }
}

/* Category colour keys: set --fill/--tint/--glyph on any element. */
.c-indigo   { --c-fill: var(--cat-indigo-fill);   --c-tint: var(--cat-indigo-tint);   --c-glyph: var(--cat-indigo-glyph); }
.c-mint     { --c-fill: var(--cat-mint-fill);     --c-tint: var(--cat-mint-tint);     --c-glyph: var(--cat-mint-glyph); }
.c-apricot  { --c-fill: var(--cat-apricot-fill);  --c-tint: var(--cat-apricot-tint);  --c-glyph: var(--cat-apricot-glyph); }
.c-sky      { --c-fill: var(--cat-sky-fill);      --c-tint: var(--cat-sky-tint);      --c-glyph: var(--cat-sky-glyph); }
.c-lavender { --c-fill: var(--cat-lavender-fill); --c-tint: var(--cat-lavender-tint); --c-glyph: var(--cat-lavender-glyph); }
.c-slate    { --c-fill: var(--cat-slate-fill);    --c-tint: var(--cat-slate-tint);    --c-glyph: var(--cat-slate-glyph); }
.c-grey     { --c-fill: var(--cat-grey-fill);     --c-tint: var(--cat-grey-tint);     --c-glyph: var(--cat-grey-glyph); }
.c-coral    { --c-fill: var(--cat-coral-fill);    --c-tint: var(--cat-coral-tint);    --c-glyph: var(--cat-coral-glyph); }
.c-amber    { --c-fill: var(--cat-amber-fill);    --c-tint: var(--cat-amber-tint);    --c-glyph: var(--cat-amber-glyph); }