/* ===========================================================================
   SELF-HOSTED FONTS — the fix for "it opens, then refreshes itself"
   ---------------------------------------------------------------------------
   index.html used to pull four families and twenty-four static weights from
   fonts.googleapis.com as a RENDER-BLOCKING stylesheet, with preconnects to two
   more hosts. With display=swap the page painted in a fallback face and then
   re-laid-out EVERY text node when the real fonts landed. Behind Tailscale, on
   a slow link, or with the CDN unreachable, that arrives seconds after the view
   does — which is exactly the delayed "refresh" that looked like an animation
   and was not. No timer in the client fires at that interval; nothing in app.js
   was ever responsible.

   These are the same faces, vendored. Three things change:

     1. No network on the critical path. Nothing to wait for, nothing to reflow.
     2. VARIABLE fonts, one file per family per subset. The stylesheets ask for
        weights 550, 620, 650 and 660, which no static weight can supply — the
        browser was synthesising or snapping them. A variable axis renders them
        properly, and in fewer bytes than the six static weights it replaces.
     3. Only latin and latin-ext are shipped. The Cyrillic, Greek and Vietnamese
        subsets were being offered and never rendered.

   Faces are fetched lazily by the browser, only when a rule actually uses them,
   so the default Inter theme costs ~130 KB and the serif and mono families cost
   nothing until a theme selects them.

   Regenerate with the script in CHANGELOG_V7.md if a family or weight changes.
   =========================================================================== */
@font-face{font-family:'Inter';font-style:normal;font-weight:300 800;font-display:swap;src:url(/fonts/inter-0.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 800;font-display:swap;src:url(/fonts/inter-1.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/space-grotesk-0.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/space-grotesk-1.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/jetbrains-mono-0.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/jetbrains-mono-1.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/newsreader-0.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/newsreader-1.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ===========================================================================
   AUREUS ONE — design tokens
   ---------------------------------------------------------------------------
   THE single source of truth for every colour, radius, shadow and font in the
   product. Generated by collapsing the :root blocks that were previously spread
   across styles.css, theme.css, aureus.css and mobile.css, where 14 tokens were
   declared in more than one file and the winner depended on <link> order.

   Rules are kept in their original cascade order, so later blocks still override
   earlier ones exactly as before. Custom properties resolve where they are USED,
   not where they are declared, which is why hoisting them all to the front
   cannot change a single computed value — verified with css-baseline.html.

   Adding a colour? It goes here. Not in a component file, and definitely not in
   a fifth stylesheet.
   =========================================================================== */


/* ── from styles.css ─────────────────────────────────────────────── */
:root {
  --brand-1: #6366f1;
  --brand-2: #8b5cf6;
  --brand-3: #d946ef;
  --bg:        #eef1f8;
  --bg-2:      #e4e9f5;
  --surface:   #ffffff;
  --surface-2: #f7f9fd;
  --line:      #e2e8f2;
  --line-2:    #cbd5e6;
  --ink:      #0f172a;
  --ink-2:    #475569;
  --ink-3:    #94a3b8;
  --on-brand: #ffffff;
  --up:    #059669;
  --up-bg: #d1fae5;
  --down:  #e11d48;
  --down-bg:#ffe4e6;
  --warn:  #d97706;
  --warn-bg:#fef3c7;
  --info:  #0284c7;
  --info-bg:#e0f2fe;
  --a-indigo:  #6366f1;
  --a-indigo-s:  #eef2ff;
  --a-emerald: #10b981;
  --a-emerald-s: #ecfdf5;
  --a-amber:   #f59e0b;
  --a-amber-s:   #fffbeb;
  --a-rose:    #f43f5e;
  --a-rose-s:    #fff1f2;
  --a-sky:     #0ea5e9;
  --a-sky-s:     #f0f9ff;
  --a-violet:  #8b5cf6;
  --a-violet-s:  #f5f3ff;
  --a-cyan:    #06b6d4;
  --a-cyan-s:    #ecfeff;
  --a-pink:    #ec4899;
  --a-pink-s:    #fdf2f8;
  --a-fuchsia: #d946ef;
  --a-fuchsia-s: #fdf4ff;
  --a-teal:    #14b8a6;
  --a-teal-s:    #f0fdfa;
  --a-red:     #ef4444;
  --a-red-s:     #fef2f2;
  --a-orange:  #f97316;
  --a-orange-s:  #fff7ed;
  --a-slate:   #64748b;
  --a-slate-s:   #f8fafc;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --shadow:    0 4px 12px rgba(15,23,42,.07), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg: 0 20px 40px -12px rgba(15,23,42,.22);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;}
:root {
  --fs-micro: 10.5px;
  --fs-tiny: 11.5px;
  --fs-sm: 12.5px;
  --fs-base: 13.5px;
  --fs-lg: 15px;
  --fs-xl: 19px;
  --fs-2xl: 25px;
  --fs-3xl: 33px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 30px;
  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 15px;
  --r-xl: 20px;
  --sh-1: 0 1px 2px rgb(15 23 42 / 5%);
  --sh-2: 0 1px 3px rgb(15 23 42 / 7%), 0 4px 12px -2px rgb(15 23 42 / 6%);
  --sh-3: 0 2px 5px rgb(15 23 42 / 8%), 0 12px 28px -6px rgb(15 23 42 / 12%);}

/* ── from theme.css ─────────────────────────────────────────────── */
:root, :root[data-theme='dark'] {
  --bg:        #060910;
  --bg-2:      #0a0f18;
  --panel:     #141b28;
  --panel-2:   #1a2230;
  --card:      #141b28;
  --raised:    #212b3c;
  --line:      #2a3547;
  --line-2:    #3a4759;
  --fg:        #f3f6fc;
  --fg-dim:    #ced7e6;
  --muted:     #8f9bb1;
  --faint:     #667389;
  --brand-1:   #f5c144;
  --brand-2:   #d99b1f;
  --brand-3:   #fff0c2;
  --up:        #34d998;
  --down:      #ff5d76;
  --warn:      #ffb838;
  --info:      #55a8ff;
  --shadow:    0 1px 0 rgb(255 255 255 / 4%) inset, 0 2px 8px -2px rgb(0 0 0 / 40%);
  --glow:      0 0 24px -6px color-mix(in srgb, var(--brand-1) 45%, transparent);}
:root[data-theme='light'] {
  --bg:        #f2f4f8;
  --bg-2:      #e8ecf2;
  --panel:     #ffffff;
  --panel-2:   #f8fafc;
  --card:      #ffffff;
  --raised:    #eef1f6;
  --line:      #dde3ec;
  --line-2:    #c6cfdd;
  --fg:        #0a1020;
  --fg-dim:    #333e52;
  --muted:     #64708a;
  --faint:     #8f9aae;
  --brand-1:   #a97a0d;
  --brand-2:   #825c06;
  --brand-3:   #6a4a04;
  --up:        #0d7f4f;
  --down:      #cc2b45;
  --warn:      #8f6008;
  --info:      #1f5fa8;
  --shadow:    0 1px 2px rgb(10 16 32 / 6%), 0 4px 14px -6px rgb(10 16 32 / 8%);
  --glow:      0 0 20px -8px color-mix(in srgb, var(--brand-1) 35%, transparent);}
/* ── Paper ────────────────────────────────────────────────────────────────
   A third mode, not a palette. White, black, hairlines — the look of a plain
   document rather than an application. Every gradient, glass panel, glow and
   tinted surface is neutralised below.

   `--up` and `--down` are set here ONLY to deepen them for print-weight
   contrast on white; they stay green and red. Profit and loss are DATA. The
   request was to flatten the decoration, and a loss rendered in grey would be
   the one change that removed information rather than noise. */
:root[data-theme='paper'] {
  --bg:        #ffffff;
  --bg-2:      #ffffff;
  --panel:     #ffffff;
  --panel-2:   #fafafa;
  --card:      #ffffff;
  --raised:    #f5f5f5;
  --line:      #d8d8d8;
  --line-2:    #bfbfbf;
  --fg:        #000000;
  --fg-dim:    #1f1f1f;
  --muted:     #565656;
  --faint:     #8a8a8a;
  --surface:   #ffffff;
  --surface-2: #f7f7f7;
  --ink:       #000000;
  /* Neutral accent: the brand gold would put colour back on every heading,
     chip, focus ring and active nav item. */
  --brand-1:   #1a1a1a;
  --brand-2:   #333333;
  --brand-3:   #4d4d4d;
  --up:        #067647;
  --down:      #c31c36;
  --warn:      #8a5a00;
  --info:      #14508f;
  --shadow:    none;
  --glow:      none;}

:root, :root[data-theme] {
  --brand-soft: color-mix(in srgb, var(--brand-1) 15%, transparent);
  --brand-line: color-mix(in srgb, var(--brand-1) 38%, transparent);
  --up-soft:    color-mix(in srgb, var(--up) 16%, transparent);
  --down-soft:  color-mix(in srgb, var(--down) 16%, transparent);
  --warn-soft:  color-mix(in srgb, var(--warn) 16%, transparent);
  --info-soft:  color-mix(in srgb, var(--info) 16%, transparent);
  --focus:      0 0 0 3px color-mix(in srgb, var(--brand-1) 30%, transparent);}
:root[data-palette='aureus'] {
  --brand-1: #f5c144;
  --brand-2: #d99b1f;
  --brand-3: #fff0c2;}
:root[data-palette='indigo'] {
  --brand-1: #8b8cff;
  --brand-2: #6366f1;
  --brand-3: #c9caff;}
:root[data-palette='ocean'] {
  --brand-1: #38bdf8;
  --brand-2: #0284c7;
  --brand-3: #bae6fd;}
:root[data-palette='sunset'] {
  --brand-1: #fb923c;
  --brand-2: #ea580c;
  --brand-3: #fed7aa;}
:root[data-palette='forest'] {
  --brand-1: #34d399;
  --brand-2: #059669;
  --brand-3: #a7f3d0;}
:root[data-palette='royal'] {
  --brand-1: #c084fc;
  --brand-2: #9333ea;
  --brand-3: #e9d5ff;}
:root[data-palette='slate'] {
  --brand-1: #94a3b8;
  --brand-2: #64748b;
  --brand-3: #e2e8f0;}
:root[data-palette='crimson'] {
  --brand-1: #fb7185;
  --brand-2: #e11d48;
  --brand-3: #fecdd3;}
:root, :root[data-font='inter'] {
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;}
:root[data-font='grotesk'] {
  --font: 'Space Grotesk', 'Inter', system-ui, sans-serif;}
:root[data-font='mono'] {
  --font: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;}
:root[data-font='serif'] {
  --font: 'Newsreader', Georgia, 'Times New Roman', serif;}
:root {
  --route-1: var(--brand-1);
  --route-2: var(--brand-2);}
:root[data-group='Overview'], :root[data-route='dashboard'] {
  --route-1: var(--brand-1);
  --route-2: var(--brand-2);}
:root[data-group='Markets'] {
  --route-1: color-mix(in srgb, #55a8ff 55%, var(--brand-1));
  --route-2: color-mix(in srgb, #2f6fd0 55%, var(--brand-2));}
:root[data-group='Money'] {
  --route-1: color-mix(in srgb, #34d998 55%, var(--brand-1));
  --route-2: color-mix(in srgb, #17976a 55%, var(--brand-2));}
:root[data-group='Academy'] {
  --route-1: color-mix(in srgb, #22d3ee 55%, var(--brand-1));
  --route-2: color-mix(in srgb, #0e93ac 55%, var(--brand-2));}
:root[data-group='Personal'] {
  --route-1: color-mix(in srgb, #c084fc 55%, var(--brand-1));
  --route-2: color-mix(in srgb, #8b46d6 55%, var(--brand-2));}
:root[data-group='Office'] {
  --route-1: color-mix(in srgb, #f4a83a 55%, var(--brand-1));
  --route-2: color-mix(in srgb, #c07510 55%, var(--brand-2));}
:root[data-group='Communication'] {
  --route-1: color-mix(in srgb, #fb923c 55%, var(--brand-1));
  --route-2: color-mix(in srgb, #d1610f 55%, var(--brand-2));}
:root[data-group='System'] {
  --route-1: color-mix(in srgb, #94a3b8 55%, var(--brand-1));
  --route-2: color-mix(in srgb, #5f6c7f 55%, var(--brand-2));}
:root {
  --sidebar-w: 246px;
  --rail-w: 66px;}
:root {
  --brand-ink: var(--brand-1);
  --brand-ink-2: var(--brand-2);}
:root[data-theme='light'] {
  --brand-ink:   color-mix(in srgb, var(--brand-1) 58%, #0a1020);
  --brand-ink-2: color-mix(in srgb, var(--brand-2) 58%, #0a1020);}

/* ── Report ───────────────────────────────────────────────────────────────
   A fourth mode, modelled on the corporate reporting dashboards this ERP sits
   next to on the same screen: deep navy on near-white, flat white cards with a
   coloured left edge, and no decoration competing with the numbers.

   Like Paper it is a MODE, not a palette — it fixes the brand hue rather than
   deferring to whatever palette is selected, because the whole point of the
   look is that the navy is constant.

   `--up` and `--down` stay green and red, and are deepened rather than muted:
   on a white card at small sizes the default emerald reads grey. Profit and
   loss are data, not decoration. */
:root[data-theme='report'] {
  --bg:        #f5f7fa;
  --bg-2:      #eef1f6;
  --panel:     #ffffff;
  --panel-2:   #f8fafc;
  --card:      #ffffff;
  --raised:    #f1f4f9;
  --line:      #e3e8f0;
  --line-2:    #ccd5e3;
  --fg:        #16233d;
  --fg-dim:    #35415a;
  --muted:     #64748b;
  --faint:     #94a3b8;
  --surface:   #ffffff;
  --surface-2: #f8fafc;
  --brand-1:   #1e3a8a;
  --brand-2:   #1d4ed8;
  --brand-3:   #2563eb;
  --brand-ink:   #1e3a8a;
  --brand-ink-2: #1d4ed8;
  --on-brand:  #ffffff;
  --up:        #047857;
  --down:      #be123c;
  --warn:      #b45309;
  --info:      #1d4ed8;
  --shadow:    0 1px 2px rgb(22 35 61 / 5%), 0 2px 8px -4px rgb(22 35 61 / 8%);
  --glow:      none;
  --radius:    10px;
  --radius-sm: 7px;
  --r-lg:      10px;
  --r-xl:      12px;}

/* ── Motion ────────────────────────────────────────────────────────────────
   One scale for every transition and animation in the product. Durations are
   deliberately short: this is a terminal people use all day, and anything that
   makes them wait twice is a bug, not a flourish.

   The easing curves matter more than the durations. `--ease-out` decelerates
   into place, which reads as "settled". `--ease-spring` overshoots very
   slightly and is reserved for things that appear; using it on a hover would
   feel unstable.

   Every rule that consumes these must degrade under [data-motion='off'] and
   prefers-reduced-motion — see the block at the end of aureus.css. */
:root {
  --dur-instant: 90ms;
  --dur-fast:    150ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;
  --ease-out:    cubic-bezier(.22, .9, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
  --stagger:     42ms;   /* per-item delay in a staggered group */
}