/* ============================================================================================================
   NSEA Accounting: look and feel. Built on the NS Enterprise Apps design system (claude.ai/artifact/STUPHF42pZ7DQHBVW73gde):
   warm olive ground, clay accent, cream text; Newsreader (display), Hanken Grotesk (text), JetBrains Mono (figures); Lucide icons.
   Loaded after 00-base.css (was styles.css), as the first of the theme parts in app/css (index.html links them in order): it re-points the old variables at the design tokens and restyles every component.
   App-level deviations from the system, all for legibility (WCAG AA, checked with a script):
     - small text uses --text-muted (#B5AC95 on olive, #6A6250 on cream), never the system's taupe-400 (2.7:1 on a card);
     - status TEXT uses lighter dark-theme / darker light-theme steps (--pos-text, --neg-text, --warn-text);
     - control borders use --border-control (3:1) instead of the hairline.
   - accent text in dark is clay-300 (the system's clay-400 is 3.9:1 on a raised card); the focus ring is solid (3:1), borders on cards and rows are a touch stronger;
   - controls are COMPACT (32px, 24px in rows) on purpose: the owner asked for NetSuite-style dense lists; touch devices get the system's 44px minimum.
   Chart series colours are a validated 8-slot categorical set per theme (see charts.js).
   ============================================================================================================ */

@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/hanken-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/hanken-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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 600; font-display: swap; src: url("/fonts/newsreader-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, 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 600; font-display: swap; src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- tokens: dark (the design system's own theme; chosen with the switch) -------------------------------------------------- */
:root {
  color-scheme: dark;
  --olive-950: #181A12; --olive-900: #21241A; --olive-850: #282C1F; --olive-800: #2F3424; --olive-700: #3A4030; --olive-600: #4A513D; --olive-500: #5C634D;
  --clay-700: #A84B2E; --clay-600: #C25E3F; --clay-500: #D97757; --clay-400: #E59177; --clay-300: #EFB29E; --clay-200: #F6D2C5;
  --cream-50: #FAF7F0; --cream-100: #F3EEE2; --taupe-200: #C4BBA4; --taupe-300: #A79D83; --taupe-500: #6A6250;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 36px; --radius-pill: 999px;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;
  --touch-min: 44px;
  --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-top: env(safe-area-inset-top, 0px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 360ms; --duration-exit: 180ms; --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* a closing sheet: quicker than its entrance, and accelerating away */

  --surface-inverse: #FAF7F0; --text-inverse: #21241A;
  --surface-base: #2F3424; --surface-sunken: #21241A; --surface-raised: #3A4030; --surface-overlay: #282C1F; --surface-hover: #444B38;
  --surface-accent-soft: rgba(217, 119, 87, 0.14);
  --text-primary: #FAF7F0; --text-secondary: #C4BBA4; --text-muted: #B5AC95; --text-accent: #EFB29E; --text-on-accent: #181A12;
  --border-subtle: rgba(250, 247, 240, 0.08); --border-default: rgba(250, 247, 240, 0.16); --border-strong: rgba(250, 247, 240, 0.26); --border-control: #8D917F; --border-accent: #D97757;
  --focus-ring: #E59177; --focus-border: #E59177;
  --pos-text: #9FBF72; --neg-text: #EE9A86; --warn-text: #E0A33E; --info-text: #8FB3C4;
  --shadow-sm: 0 1px 2px rgba(15, 17, 11, 0.30), 0 2px 6px rgba(15, 17, 11, 0.32);
  --shadow-md: 0 2px 4px rgba(15, 17, 11, 0.28), 0 8px 24px rgba(15, 17, 11, 0.42);
  --shadow-lg: 0 4px 8px rgba(15, 17, 11, 0.30), 0 20px 52px rgba(15, 17, 11, 0.52);
  --shadow-xl: 0 8px 16px rgba(15, 17, 11, 0.34), 0 36px 88px rgba(15, 17, 11, 0.58);
  --glow-accent: 0 6px 24px rgba(217, 119, 87, 0.30);
  --shadow-card: 0 2px 4px rgba(15, 17, 11, 0.22), 0 8px 22px rgba(15, 17, 11, 0.30);
  --inset-top: inset 0 1px 0 rgba(250, 247, 240, 0.06);
  --glass: rgba(42, 46, 31, 0.78);
  /* the rest of the system's vocabulary, as published (ramps, scales, semantics), so components can use any token the system defines */
  --clay-100: #FBEAE2; --cream-200: #E8E0CE; --cream-300: #D8CDB4; --taupe-400: #877E66;
  --green-500: #7E9B53; --green-200: #D6E0BE; --amber-500: #E0A33E; --amber-200: #F6E2B4; --red-500: #C8553D; --red-200: #F0CABF; --blue-500: #6E93A6; --blue-200: #CBDCE2;
  --success: var(--green-500); --warning: var(--amber-500); --danger: var(--red-500); --info: var(--blue-500); --surface-accent: var(--clay-500);
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: 2.25rem; --text-3xl: 3rem; --text-4xl: 4rem; --text-5xl: 5.25rem;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --leading-tight: 1.08; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.7;
  --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.12em;
  --space-0: 0; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem;
  --container-max: 1200px; --container-wide: 1440px; --gutter: var(--space-5); --gutter-mobile: 20px; --gutter-tablet: 32px; --gutter-desktop: 48px;
  --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px);
  --ease-soft: cubic-bezier(0.4, 0.14, 0.3, 1); --blur-overlay: 16px; --ring: 0 0 0 3px var(--focus-ring);
  --shadow-xs: 0 1px 2px rgba(15, 17, 11, 0.40);
  --shadow-card-hover: 0 6px 12px rgba(15, 17, 11, 0.30), 0 22px 56px rgba(15, 17, 11, 0.52);
  /* stacking, low to high: sticky table heads 1-2, header 21 (27 on phones, 35 with alerts open), tab bar 25, bulk bar 28, menus and
     simple sheets 30-31, drawer 39-40, filter sheet 41-42, Add/Duplicates sheet 43, Ask sheet 44-45, pickers 55 (only without the
     Popover API; with it the list is in the top layer, above all of these), toasts 60 */
  --z-picker: 55;
  --header-live: var(--header-h, 3rem); --tabbar-top: 0px; --kb: 0px; --page-x: 1.25rem; /* set by theme.js: header height while shown (0 while scrolled away), tab bar top from the screen bottom, on-screen keyboard height */
  --s1: #4a95ec; --s2: #e0642f; --s3: #199e70; --s4: #c98500; --s5: #dd5c8b; --s6: #2fa02f; --s7: #8f84ea; --s8: #e56565;
}
/* ---- tokens: light, the default (Dean, 2026-10-16) ------------------------------------------------------------
   Ground and text from Rocket Money's own tokens, for legibility: white cards on #F7F7F7, text #111111 (18.9:1 on white),
   secondary and small text #545454 (7.5:1), neutral hairlines. Money out is its red #C12A36; money in is its green #298540
   one step darker (#237A39, 4.8:1 on every ground; the original is 4.2:1 on #F2F2F2). The clay accent stays. Dark is the
   olive theme above, chosen with the theme switch; the OS setting is not followed. */
:root:not([data-theme="dark"]) {
  color-scheme: light;
  --surface-inverse: #111111; --text-inverse: #FFFFFF;
  --success: #237A39; --warning: #B67A17; --danger: #C12A36; --info: #4E7383;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 4px 10px rgba(0, 0, 0, 0.06), 0 18px 44px rgba(0, 0, 0, 0.10);
  --glow-accent: 0 6px 22px rgba(217, 119, 87, 0.28);
  --surface-base: #F7F7F7; --surface-sunken: #F2F2F2; --surface-raised: #FFFFFF; --surface-overlay: #FFFFFF; --surface-hover: #F2F2F2;
  --surface-accent-soft: rgba(168, 75, 46, 0.10);
  --text-primary: #111111; --text-secondary: #545454; --text-muted: #545454; --text-accent: #A84B2E; --text-on-accent: #111111;
  --border-subtle: rgba(0, 0, 0, 0.06); --border-default: rgba(0, 0, 0, 0.12); --border-strong: rgba(0, 0, 0, 0.20); --border-control: #8A8A8A; --border-accent: #C25E3F;
  --focus-ring: #A84B2E; --focus-border: #A84B2E;
  --pos-text: #237A39; --neg-text: #C12A36; --warn-text: #8F5F0E; --info-text: #4E7383;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.06), 0 20px 52px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.08), 0 36px 88px rgba(0, 0, 0, 0.16);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.05);
  --inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --glass: rgba(255, 255, 255, 0.86);
  --s1: #2a78d6; --s2: #e2531f; --s3: #168a62; --s4: #b87a00; --s5: #d6537f; --s6: #007a00; --s7: #4a3aa7; --s8: #d63c3c;
}

/* ---- the old variables, re-pointed so every existing rule picks up the new look ------------------------------ */
:root {
  --bg: var(--surface-base); --card: var(--surface-raised); --fg: var(--text-primary); --muted: var(--text-muted); --line: var(--border-default);
  --accent: var(--text-accent); --neg: var(--neg-text); --pos: var(--pos-text); --warn: var(--warn-text);
}