/* ============================================================================
   BUDGETGRID — design tokens  ("Ledger Paper")
   Cool paper for the finance workspace, deep ink for the phone surfaces at
   night. Four position colours carry the whole product: grid-green is money
   still available, amber is committed, teal is invoiced, ink is paid, brick
   is over. Every colour exists in both themes; accent "-ink" variants are
   AA on their surfaces. No hex in portal CSS — use the tokens.
   ==========================================================================*/
:root {
  --font-ui: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* brand hues — theme-invariant fills (carry white text) */
  --grid: #0D7F56; --grid-600: #0B6E4B; --grid-700: #08573B;
  --cobalt: #2D5BFF; --cobalt-600: #1F46D1;
  --amber: #E9A23B; --amber-600: #C8841E;
  --brick: #C43D26; --brick-600: #B3361F;
  --plum: #6D3AC7; --plum-600: #5A2DA8;
  --teal: #1B8A8A; --teal-600: #136B6B;
  --korevra: #E8732C; --korevra-2: #F09468; --korevra-3: #F2B49A; --korevra-4: #F8E1D3;
  --gold: #D4A843;
  --on-fill: #FFFFFF;

  /* light surfaces */
  --bg: #F5F6F2; --bg-2: #ECEEE8; --bg-3: #E1E4DC; --card: #FFFFFF; --card-2: #FAFBF7;
  --line: rgba(14, 26, 43, 0.10); --line-2: rgba(14, 26, 43, 0.18);
  --ink: #0E1A2B; --ink-2: #33415A; --ink-3: #56667A; --ink-4: #5C6875; --inverse: #FFFFFF;

  /* accent inks (AA on light surfaces) */
  --grid-ink: #0B6E4B; --cobalt-ink: #1A3AAE; --amber-ink: #7A4D05; --brick-ink: #9E2C17; --plum-ink: #5A2DA8; --teal-ink: #136B6B; --gold-ink: #7A5A12;

  /* washes */
  --grid-wash: rgba(15, 138, 95, 0.12); --cobalt-wash: rgba(45, 91, 255, 0.10); --amber-wash: rgba(233, 162, 59, 0.16); --brick-wash: rgba(212, 71, 47, 0.12); --plum-wash: rgba(109, 58, 199, 0.11); --teal-wash: rgba(27, 138, 138, 0.12); --neutral-wash: rgba(14, 26, 43, 0.06);

  /* position colours (the four positions + over) */
  --pos-actual: #0E1A2B; --pos-obligated: #1B8A8A; --pos-committed: #E9A23B; --pos-available: rgba(15, 138, 95, 0.22); --pos-over: #D4472F;

  /* elevation */
  --shadow-1: 0 1px 2px rgba(14, 26, 43, 0.06), 0 1px 3px rgba(14, 26, 43, 0.08);
  --shadow-2: 0 4px 14px rgba(14, 26, 43, 0.10), 0 1px 3px rgba(14, 26, 43, 0.06);
  --shadow-3: 0 18px 48px rgba(14, 26, 43, 0.18), 0 4px 12px rgba(14, 26, 43, 0.08);
  --glow-grid: 0 0 0 4px rgba(15, 138, 95, 0.22); --glow-cobalt: 0 0 0 4px rgba(45, 91, 255, 0.22);

  /* geometry */
  --r-1: 8px; --r-2: 12px; --r-3: 16px; --r-4: 24px; --r-pill: 999px;
  --gutter: clamp(16px, 3vw, 32px);

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms; --t-base: 240ms; --t-slow: 420ms;

  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0B1220; --bg-2: #101A2C; --bg-3: #162238; --card: #131E31; --card-2: #182640;
  --line: rgba(238, 242, 247, 0.10); --line-2: rgba(238, 242, 247, 0.18);
  --ink: #EEF2F7; --ink-2: #C5CEDA; --ink-3: #98A6B7; --ink-4: #74839A; --inverse: #0B1220;
  --grid-ink: #3FC48F; --cobalt-ink: #86A4FF; --amber-ink: #F4BE5E; --brick-ink: #FF8A73; --plum-ink: #BC9BF6; --teal-ink: #4FC9C9; --gold-ink: #E6C26A;
  --grid-wash: rgba(63, 196, 143, 0.14); --cobalt-wash: rgba(134, 164, 255, 0.14); --amber-wash: rgba(244, 190, 94, 0.16); --brick-wash: rgba(255, 138, 115, 0.14); --plum-wash: rgba(188, 155, 246, 0.14); --teal-wash: rgba(79, 201, 201, 0.14); --neutral-wash: rgba(238, 242, 247, 0.08);
  --pos-actual: #EEF2F7; --pos-obligated: #4FC9C9; --pos-committed: #F4BE5E; --pos-available: rgba(63, 196, 143, 0.22); --pos-over: #FF8A73;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-3: 0 18px 48px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }