/* Rhymer Budget design tokens: the Canvas palette (Tailwind v3 hex, docs/CANVAS-INVENTORY.md section 11), Geist,
   and the semantic names every page and the sign-in page use. Light and dark follow the device; the Appearance pick
   (theme.js, data-theme on <html>) overrides it. Loaded by index.html and the sign-in page (auth.OPEN_EXACT). */

@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/geist-latin.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: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/geist-latin-ext.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;
}

:root {
  /* palette (Canvas, Tailwind v3) */
  --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8;
  --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a;
  --slate-950: #020617;
  --emerald-50: #ecfdf5; --emerald-100: #d1fae5; --emerald-200: #a7f3d0; --emerald-300: #6ee7b7; --emerald-400: #34d399;
  --emerald-500: #10b981; --emerald-600: #059669; --emerald-700: #047857; --emerald-800: #065f46; --emerald-900: #064e3b;
  --emerald-950: #022c22;
  --amber-50: #fffbeb; --amber-100: #fef3c7; --amber-200: #fde68a; --amber-300: #fcd34d; --amber-500: #f59e0b;
  --amber-600: #d97706; --amber-700: #b45309; --amber-800: #92400e; --amber-900: #78350f; --amber-950: #451a03;
  --rose-50: #fff1f2; --rose-200: #fecdd3; --rose-500: #f43f5e; --rose-600: #e11d48; --rose-700: #be123c;
  --rose-800: #9f1239; --rose-900: #881337;
  --teal-50: #f0fdfa; --teal-100: #ccfbf1; --teal-200: #99f6e4; --teal-500: #14b8a6; --teal-600: #0d9488;
  --teal-700: #0f766e; --teal-800: #115e59;
  --indigo-50: #eef2ff; --indigo-100: #e0e7ff; --indigo-200: #c7d2fe; --indigo-600: #4f46e5; --indigo-700: #4338ca;
  --indigo-800: #3730a3; --indigo-950: #1e1b4b;
  --sky-50: #f0f9ff; --sky-500: #0ea5e9; --sky-900: #0c4a6e;
  --purple-50: #faf5ff; --purple-500: #a855f7; --purple-900: #581c87;
  --orange-50: #fff7ed;

  /* type, radius, shadow */
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-2xl: 16px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);

  /* semantic (light) */
  color-scheme: light;
  --bg: var(--slate-50);
  --surface: #ffffff;
  --surface2: var(--slate-100);
  --tile: var(--slate-50);
  --ink: var(--slate-900);
  --ink2: var(--slate-600);
  --muted: var(--slate-500);
  --line: var(--slate-200);
  --line2: var(--slate-300);
  --logo: var(--emerald-600);
  --on-logo: #ffffff;
  --cta: var(--emerald-600);
  --cta-hover: var(--emerald-700);
  --on-cta: #ffffff;
  --cta-shadow: var(--shadow-sm);
  --accent: var(--emerald-700);
  --accent-soft: var(--emerald-50);
  --accent-line: var(--emerald-200);
  --accent-ring: color-mix(in srgb, var(--emerald-500) 28%, transparent);
  --accent-ink: var(--emerald-800);
  --good: var(--emerald-700);
  --good-soft: var(--emerald-50);
  --warn: var(--amber-700);
  --warn-soft: var(--amber-50);
  --amber-soft: var(--amber-50);
  --amber-line: var(--amber-200);
  --bad: var(--rose-700);
  --bad-soft: var(--rose-50);
  --red: var(--rose-600);
  --info: var(--indigo-700);
  --info-soft: var(--indigo-50);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--slate-900);
    --surface: var(--slate-800);
    --surface2: var(--slate-700);
    --tile: #172033;
    --ink: var(--slate-50);
    --ink2: var(--slate-300);
    --muted: var(--slate-400);
    --line: var(--slate-700);
    --line2: var(--slate-600);
    --logo: var(--emerald-600);
    --cta: var(--emerald-600);
    --cta-hover: var(--emerald-500);
    --cta-shadow: none;
    --accent: var(--emerald-400);
    --accent-soft: color-mix(in srgb, var(--emerald-500) 14%, var(--slate-800));
    --accent-line: color-mix(in srgb, var(--emerald-400) 40%, var(--slate-800));
    --accent-ring: color-mix(in srgb, var(--emerald-400) 30%, transparent);
    --accent-ink: var(--emerald-200);
    --good: var(--emerald-400);
    --good-soft: color-mix(in srgb, var(--emerald-500) 14%, var(--slate-800));
    --warn: var(--amber-300);
    --warn-soft: color-mix(in srgb, var(--amber-500) 14%, var(--slate-800));
    --amber-soft: color-mix(in srgb, var(--amber-500) 14%, var(--slate-800));
    --amber-line: color-mix(in srgb, var(--amber-500) 40%, var(--slate-800));
    --bad: #fda4af;
    --bad-soft: color-mix(in srgb, var(--rose-500) 16%, var(--slate-800));
    --red: #fb7185;
    --info: #a5b4fc;
    --info-soft: color-mix(in srgb, var(--indigo-600) 18%, var(--slate-800));
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--slate-900);
  --surface: var(--slate-800);
  --surface2: var(--slate-700);
  --tile: #172033;
  --ink: var(--slate-50);
  --ink2: var(--slate-300);
  --muted: var(--slate-400);
  --line: var(--slate-700);
  --line2: var(--slate-600);
  --logo: var(--emerald-600);
  --cta: var(--emerald-600);
  --cta-hover: var(--emerald-500);
  --cta-shadow: none;
  --accent: var(--emerald-400);
  --accent-soft: color-mix(in srgb, var(--emerald-500) 14%, var(--slate-800));
  --accent-line: color-mix(in srgb, var(--emerald-400) 40%, var(--slate-800));
  --accent-ring: color-mix(in srgb, var(--emerald-400) 30%, transparent);
  --accent-ink: var(--emerald-200);
  --good: var(--emerald-400);
  --good-soft: color-mix(in srgb, var(--emerald-500) 14%, var(--slate-800));
  --warn: var(--amber-300);
  --warn-soft: color-mix(in srgb, var(--amber-500) 14%, var(--slate-800));
  --amber-soft: color-mix(in srgb, var(--amber-500) 14%, var(--slate-800));
  --amber-line: color-mix(in srgb, var(--amber-500) 40%, var(--slate-800));
  --bad: #fda4af;
  --bad-soft: color-mix(in srgb, var(--rose-500) 16%, var(--slate-800));
  --red: #fb7185;
  --info: #a5b4fc;
  --info-soft: color-mix(in srgb, var(--indigo-600) 18%, var(--slate-800));
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}