/* Design tokens, reset, and base element styles.
 *
 * Three theme states, not two. An explicit choice stamps data-theme on <html>;
 * the default "system" setting stamps nothing, and only prefers-color-scheme
 * separates light from dark there. So: the bare :root block carries the whole
 * light palette, the media query redefines tokens for an unstamped document,
 * and the [data-theme="dark"] block redefines them again so an explicit choice
 * wins over the OS in both directions.
 *
 * Nothing below this file should hold a colour that changes with the theme.
 */

:root{
  --ink:#11121c;
  --ink-2:#1b1d2c;
  --ink-3:#262940;
  --paper:#f4f5fa;
  --card:#ffffff;
  --line:#e7e8f0;
  --line-soft:#eef0f6;
  /* Borders on form controls, where the border IS the affordance — an empty
     input has nothing else to announce it. WCAG 1.4.11 wants 3:1 for those.
     --line is 1.22:1 on white, which is decorative-only territory; this is
     3.28:1 on the white card and 3.01:1 on the --paper page, passing on both.
     Containers, table rules and buttons keep --line: a panel is not a UI
     component, and a button is identified by its label rather than its edge. */
  --line-input:#8a8da1;
  --text:#15161f;
  --text-dim:#6c7086;
  --text-faint:#9598ab;
  --teal:#1f7a63;
  --teal-soft:#e5f3ee;
  --rust:#b8442f;
  --rust-soft:#fbebe7;
  --gold:#b5822a;
  --gold-soft:#f7edda;
  --indigo:#4a4fc4;
  --indigo-soft:#e7ecfb;
  --indigo-deep:#22306e;   /* 10.4:1 on --indigo-soft */
  /* Surfaces that invert against the page: the dark metric card, the toast.
     Dark on a light page; lifted, not near-black, on a dark one. */
  --invert:#11121c;
  --invert-text:#fbfbfe;
  --invert-dim:#9598b3;
  --invert-faint:#7d81a0;    /* was #71748f, which measured 4.08:1 — under AA */

  /* The primary button is the strongest thing on the page, so it inverts too. */
  --btn-bg:#11121c;
  --btn-bg-hover:#1b1d2b;
  --btn-fg:#fdfdff;

  /* Text on a saturated accent fill — a selected month, a category swatch.
     Dark mode lightens every accent, and white on those measures 2.3-2.8:1;
     dark text on them measures 5-8:1. So this flips with the theme. */
  --on-accent:#ffffff;

  --text-disabled:#c6c8d6;   /* unavailable months in the period picker */
  --halo:#ffffff;            /* the balance card's rim against the page */

  /* Dims the page behind the import notice. Heavier in dark, where a light
     scrim would lift the page rather than push it back. */
  --scrim:rgba(17,18,28,0.32);

  /* The sign-in wash. Two soft corners over --paper. */
  --wash-a:#e6efeb;
  --wash-b:#f2e9dd;

  --shadow-card: 0 1px 2px rgba(17,18,28,0.04), 0 8px 24px -12px rgba(17,18,28,0.12);
  --radius: 14px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Left padding that clears the currency symbol on an amount input: the
     symbol's 13px offset, the symbol itself, and a gap before the digits.
     Not a colour, so it is declared here once and not in the two theme blocks.

     Sized in `ch` — one character of the element's own monospace font — because
     a symbol is not one character wide. It is three in TSh, CN¥ and CHF, and the
     28px this replaced was measured against R: those three ran 8.4px into the
     digits. `ch` rather than a pixel count per symbol means this also survives
     the font falling back to the generic monospace, and the mobile size bump.

     --sym-len is the symbol's length, set on <html> by renderChrome(). The
     fallback of 1 resolves to 28.1px, which is what every single-character
     symbol reserved before this existed — so nothing about R, $, € or £ moves. */
  --money-pad: calc(13px + var(--sym-len, 1) * 1ch + 7px);
}

/* ---------------------------------------------------------------- dark ----
 * The sidebar goes *darker* than the page rather than lighter, so it stays the
 * anchor instead of dissolving into the background the way a near-equal surface
 * would. Page sits above it, cards above that.
 *
 * The two blocks below are identical on purpose: the media query answers for a
 * document with no data-theme stamp, the attribute selector for one that has
 * chosen dark outright.
 */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#0b0c12;
    --ink-2:#171825;
    --ink-3:#23253a;
    --paper:#14151f;
    --card:#1c1e2b;
    --line:#2a2d3d;
    --line-soft:#22242f;
    --line-input:#6f7391;
    --text:#e8eaf4;
    --text-dim:#a3a7bd;
    --text-faint:#8b8fa6;
    --teal:#4fbf9b;
    --teal-soft:#16332c;
    --rust:#e8836a;
    --rust-soft:#37211c;
    --gold:#d9a74e;
    --gold-soft:#33290f;
    --indigo:#8f93ee;
    --indigo-soft:#262a48;
    --indigo-deep:#c9cbff;

    --invert:#262a3b;
    --invert-text:#eceef7;
    --invert-dim:#a3a7bd;
    --invert-faint:#9195ab;

    --btn-bg:#e8eaf4;
    --btn-bg-hover:#ffffff;
    --btn-fg:#14151f;

    --on-accent:#14151f;
    --text-disabled:#4a4e63;
    --halo:#2c3044;

    --scrim:rgba(6,7,12,0.58);

    --wash-a:#16241f;
    --wash-b:#241f16;

    --shadow-card: 0 1px 2px rgba(0,0,0,0.30), 0 10px 28px -14px rgba(0,0,0,0.65);
  }
}

:root[data-theme="dark"]{
  --ink:#0b0c12;
  --ink-2:#171825;
  --ink-3:#23253a;
  --paper:#14151f;
  --card:#1c1e2b;
  --line:#2a2d3d;
  --line-soft:#22242f;
  --line-input:#6f7391;
  --text:#e8eaf4;
  --text-dim:#a3a7bd;
  --text-faint:#8b8fa6;
  --teal:#4fbf9b;
  --teal-soft:#16332c;
  --rust:#e8836a;
  --rust-soft:#37211c;
  --gold:#d9a74e;
  --gold-soft:#33290f;
  --indigo:#8f93ee;
  --indigo-soft:#262a48;
  --indigo-deep:#c9cbff;

  --invert:#262a3b;
  --invert-text:#eceef7;
  --invert-dim:#a3a7bd;
  --invert-faint:#9195ab;

  --btn-bg:#e8eaf4;
  --btn-bg-hover:#ffffff;
  --btn-fg:#14151f;

  --on-accent:#14151f;
  --text-disabled:#4a4e63;
  --halo:#2c3044;

  --scrim:rgba(6,7,12,0.58);

  --wash-a:#16241f;
  --wash-b:#241f16;

  --shadow-card: 0 1px 2px rgba(0,0,0,0.30), 0 10px 28px -14px rgba(0,0,0,0.65);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color-scheme:light dark;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;}
::selection{background:var(--teal-soft);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}