/* KimiSoba suite design tokens — the single source for every app.
 *
 * Phase 1 of REDESIGN.md: this file replaces the token blocks that were
 * copy-pasted into all eight app stylesheets and drifted apart.
 *
 * Cascade order is load-bearing and must not be rearranged: light defaults,
 * then light theme variants, then the dark base, then dark theme variants.
 * A light theme block placed after the dark base wins over it at equal
 * specificity — which is how ThriftyKimi and NestKimi lost dark grey/mono.
 *
 * Link this BEFORE suite-chrome.css and any app stylesheet.
 */

/* --- Scale primitives -------------------------------------------------------
 *
 * Theme-independent. Today's values, named so Phase 2 lands direction C
 * (soft depth) by changing this block and nothing else. Targets noted per
 * line. Components still hard-code most of these numbers; Phase 2 rewires
 * them screen by screen.
 */
:root {
  /* Spacing, 4px base. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Radii — direction C (soft depth). */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 22px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* Elevation — two layers per level: a tight contact shadow plus a soft lift. */
  --elev-1: 0 1px 2px rgba(22, 36, 31, 0.05), 0 2px 6px rgba(22, 36, 31, 0.05);
  --elev-2: 0 1px 3px rgba(22, 36, 31, 0.05), 0 6px 20px rgba(22, 36, 31, 0.07);
  --elev-3: 0 2px 5px rgba(22, 36, 31, 0.05), 0 12px 30px rgba(22, 36, 31, 0.09);

  /* Type scale. */
  --text-xs: 0.72rem;
  --text-sm: 0.82rem;
  --text-base: 0.95rem;
  --text-md: 1.05rem;
  --text-lg: 1.35rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.2rem;
  --text-3xl: 3rem;

  /* Motion. Phase 4 consumes these; a reduced-motion override collapses them. */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}

/* --- Theme tokens ---------------------------------------------------------- */

:root,
html[data-theme="default"] {
  --ink: #14201c;
  --ink-soft: #3d4f47;
  --muted: #6b7c74;
  --paper: #e9f0ea;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --line: rgba(20, 32, 28, 0.1);
  --accent: #0f7a5f;
  --accent-deep: #0a5543;
  --accent-hover: #0a5543;
  --accent-soft: #d8f0e7;
  --accent-rgb: 15, 122, 95;
  --ink-rgb: 20, 32, 28;
  --warn: #b45309;
  --warn-soft: #fff1df;
  --danger: #b42318;
  --chart-1: #9dccb8;
  --chart-2: #9eb6d4;
  --chart-3: #d4c39e;
  --chart-4: #c3aed4;
  --chart-5: #d4aeb8;
  --chart-6: #aec4a3;
  --chart-7: #b0bdb6;
  --chart-8: #c9b8a4;
  --chart-bar-2: #c45c26;
  --radius: 18px;
  --shadow: 0 1px 3px rgba(22, 36, 31, 0.05), 0 6px 20px rgba(22, 36, 31, 0.07);
  --font-display: "Manrope", system-ui, -apple-system, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, sans-serif;
  --bg-glow-1: #c8e8dc;
  --bg-glow-2: #dce8f5;
  --bg-mid: #eef4ef;
  --bg-end: #e8efe9;
  --topbar-bg: rgba(243, 246, 242, 0.7);
  --nav-bg: rgba(255, 255, 255, 0.75);
  --card-bg: #ffffff;
  --card-bg-soft: rgba(255, 255, 255, 0.7);
  --muted-surface: #f7f7f5;
  --brand-end: #1d6b9f;
  --tabs-bg: linear-gradient(180deg, #d8f0e7 0%, #eef8f3 55%, #ffffff 100%);
  --tabs-shadow: 0 8px 22px rgba(15, 122, 95, 0.12);
  --modal-backdrop: rgba(20, 32, 28, 0.45);
  --expired-bg: rgba(255, 248, 242, 0.9);
  --nav-active-fg: #ffffff;
  --logo-ks: #1d2b4d;
  --ok: #0f7a5f;
  --ok-soft: #d8f0e7;
  --income: #1b8a5a;
  --expense: #c62828;
  --fab-idle: var(--accent);
  --networth-from: #0a5543;
  --networth-to: #1d6b9f;
  --rest-warn: #c45c26;
}

html[data-theme="blue"] {
  --ink: #132428;
  --ink-soft: #3a555c;
  --muted: #6a8288;
  --paper: #e5eff1;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --line: rgba(19, 36, 40, 0.1);
  --accent: #308695;
  --accent-deep: #246a76;
  --accent-hover: #246a76;
  --accent-soft: #d5ebee;
  --accent-rgb: 48, 134, 149;
  --ink-rgb: 19, 36, 40;
  --warn: #b45309;
  --warn-soft: #fff1df;
  --danger: #b42318;
  --chart-1: #8fc0cb;
  --chart-2: #9eb0d8;
  --chart-3: #b8c9d4;
  --chart-4: #a8d0c8;
  --chart-5: #c4b4d8;
  --chart-6: #d4c4a8;
  --chart-7: #a8b8c0;
  --chart-8: #c8d0d8;
  --chart-bar-2: #c45c26;
  --shadow: 0 1px 3px rgba(19, 36, 40, 0.05), 0 6px 20px rgba(19, 36, 40, 0.07);
  --bg-glow-1: #c5e4e9;
  --bg-glow-2: #d7e4f2;
  --bg-mid: #eef5f6;
  --bg-end: #e6f0f2;
  --topbar-bg: rgba(242, 247, 248, 0.7);
  --nav-bg: rgba(255, 255, 255, 0.75);
  --card-bg: #ffffff;
  --card-bg-soft: rgba(255, 255, 255, 0.7);
  --muted-surface: #f5f8f9;
  --brand-end: #1d6b9f;
  --tabs-bg: linear-gradient(180deg, #d5ebee 0%, #eaf5f7 55%, #ffffff 100%);
  --tabs-shadow: 0 8px 22px rgba(48, 134, 149, 0.14);
  --modal-backdrop: rgba(19, 36, 40, 0.45);
  --expired-bg: rgba(255, 248, 242, 0.9);
  --nav-active-fg: #ffffff;
  --ok: #308695;
  --ok-soft: #d5ebee;
  --networth-from: #246a76;
  --networth-to: #1d6b9f;
}

html[data-theme="red"] {
  --ink: #2a1418;
  --ink-soft: #5c3a41;
  --muted: #8a6a70;
  --paper: #f4eaec;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --line: rgba(42, 20, 24, 0.1);
  --accent: #d45769;
  --accent-deep: #a83d4c;
  --accent-hover: #a83d4c;
  --accent-soft: #f8dce1;
  --accent-rgb: 212, 87, 105;
  --ink-rgb: 42, 20, 24;
  --warn: #b45309;
  --warn-soft: #fff1df;
  --danger: #b42318;
  --chart-1: #e0a8b2;
  --chart-2: #d4b4c4;
  --chart-3: #e0c4a8;
  --chart-4: #c4a8c8;
  --chart-5: #e0b8c0;
  --chart-6: #d4c0b0;
  --chart-7: #c8b0b4;
  --chart-8: #e8d0d4;
  --chart-bar-2: #c45c26;
  --shadow: 0 1px 3px rgba(42, 20, 24, 0.05), 0 6px 20px rgba(42, 20, 24, 0.07);
  --bg-glow-1: #f0d0d6;
  --bg-glow-2: #e8dce8;
  --bg-mid: #f7eef0;
  --bg-end: #f3e8ea;
  --topbar-bg: rgba(248, 243, 244, 0.7);
  --nav-bg: rgba(255, 255, 255, 0.75);
  --card-bg: #ffffff;
  --card-bg-soft: rgba(255, 255, 255, 0.7);
  --muted-surface: #f7f2f3;
  --brand-end: #9b4d7a;
  --tabs-bg: linear-gradient(180deg, #f8dce1 0%, #faf0f2 55%, #ffffff 100%);
  --tabs-shadow: 0 8px 22px rgba(212, 87, 105, 0.14);
  --modal-backdrop: rgba(42, 20, 24, 0.45);
  --expired-bg: rgba(255, 248, 242, 0.9);
  --nav-active-fg: #ffffff;
  --ok: #0f7a5f;
  --ok-soft: #d8f0e7;
  --networth-from: #a83d4c;
  --networth-to: #9b4d7a;
}

html[data-theme="grey"] {
  --ink: #22262b;
  --ink-soft: #4a5159;
  --muted: #7a828c;
  --paper: #ebedf1;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --line: rgba(34, 38, 43, 0.12);
  --accent: #5c6570;
  --accent-deep: #3f4650;
  --accent-hover: #3f4650;
  --accent-soft: #e4e7eb;
  --accent-rgb: 92, 101, 112;
  --ink-rgb: 34, 38, 43;
  --warn: #9a6b2f;
  --warn-soft: #f3eadc;
  --danger: #a33b3b;
  --chart-1: #9aa3ad;
  --chart-2: #b0b7bf;
  --chart-3: #8b939c;
  --chart-4: #c2c7cd;
  --chart-5: #7d868f;
  --chart-6: #aeb5bd;
  --chart-7: #949ca5;
  --chart-8: #d0d4d9;
  --chart-bar-2: #6b7280;
  --shadow: 0 18px 50px rgba(34, 38, 43, 0.08);
  --bg-glow-1: #dde1e6;
  --bg-glow-2: #e8eaee;
  --bg-mid: #f1f2f4;
  --bg-end: #e9ebef;
  --topbar-bg: rgba(242, 243, 245, 0.78);
  --nav-bg: rgba(255, 255, 255, 0.8);
  --card-bg: #ffffff;
  --card-bg-soft: rgba(255, 255, 255, 0.72);
  --muted-surface: #f6f7f8;
  --brand-end: #7a828c;
  --tabs-bg: linear-gradient(180deg, #e4e7eb 0%, #f1f3f5 55%, #ffffff 100%);
  --tabs-shadow: 0 8px 22px rgba(92, 101, 112, 0.12);
  --modal-backdrop: rgba(34, 38, 43, 0.45);
  --expired-bg: rgba(245, 245, 245, 0.95);
  --nav-active-fg: #ffffff;
  --ok: #3d6b5a;
  --ok-soft: #dce8e2;
  --networth-from: #3e4650;
  --networth-to: #7a828c;
}

html[data-theme="mono"] {
  --ink: #0a0a0a;
  --ink-soft: #2a2a2a;
  --muted: #666666;
  --paper: #ffffff;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-solid: #ffffff;
  --line: rgba(0, 0, 0, 0.18);
  --accent: #111111;
  --accent-deep: #000000;
  --accent-hover: #000000;
  --accent-soft: #ececec;
  --accent-rgb: 17, 17, 17;
  --ink-rgb: 10, 10, 10;
  --warn: #222222;
  --warn-soft: #f0f0f0;
  --danger: #000000;
  --chart-1: #111111;
  --chart-2: #444444;
  --chart-3: #777777;
  --chart-4: #999999;
  --chart-5: #222222;
  --chart-6: #555555;
  --chart-7: #888888;
  --chart-8: #bbbbbb;
  --chart-bar-2: #000000;
  --shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
  --bg-glow-1: #f5f5f5;
  --bg-glow-2: #eeeeee;
  --bg-mid: #fafafa;
  --bg-end: #f0f0f0;
  --topbar-bg: rgba(255, 255, 255, 0.92);
  --nav-bg: rgba(255, 255, 255, 0.96);
  --card-bg: #ffffff;
  --card-bg-soft: #f7f7f7;
  --muted-surface: #f4f4f4;
  --brand-end: #333333;
  --tabs-bg: linear-gradient(180deg, #f0f0f0 0%, #fafafa 55%, #ffffff 100%);
  --tabs-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  --modal-backdrop: rgba(0, 0, 0, 0.5);
  --expired-bg: #f5f5f5;
  --nav-active-fg: #ffffff;
  --ok: #222222;
  --ok-soft: #e8e8e8;
  --networth-from: #111111;
  --networth-to: #333333;
}

html[data-mode="dark"] {
  --ink: #e7efea;
  --ink-soft: #b7c7bf;
  --muted: #8a9a92;
  --paper: #101614;
  --surface: rgb(28, 36, 32);
  --surface-solid: #1a2220;
  --line: rgba(231, 239, 234, 0.12);
  --ink-rgb: 231, 239, 234;
  --warn: #f0b35a;
  --warn-soft: #3a2c18;
  --danger: #f07167;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.34);
  --bg-glow-1: #1a3a30;
  --bg-glow-2: #1a2a3a;
  --bg-mid: #121a17;
  --bg-end: #0e1412;
  --topbar-bg: rgba(16, 22, 20, 0.85);
  --nav-bg: rgba(26, 34, 32, 0.9);
  --card-bg: rgb(26, 34, 32);
  --card-bg-soft: rgba(26, 34, 32, 0.75);
  --muted-surface: #151c1a;
  --tabs-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  --modal-backdrop: rgba(0, 0, 0, 0.55);
  --expired-bg: rgba(58, 44, 24, 0.55);
  --nav-active-fg: #101614;
  --logo-ks: #f2eee3;
  color-scheme: dark;
  --ok: #3dba95;
  --ok-soft: #1c3d33;
  --income: #3dba95;
  --expense: #f07167;
  --networth-from: #1c3d33;
  --networth-to: #1a2a3a;
}

html[data-mode="dark"][data-theme="default"] {
  --accent: #3dba95;
  --accent-deep: #7ee0c0;
  --accent-hover: #2fa882;
  --accent-soft: #1c3d33;
  --accent-rgb: 61, 186, 149;
  --chart-1: #5a9a82;
  --chart-2: #6a86a8;
  --chart-3: #a89268;
  --chart-4: #8a72a0;
  --chart-5: #a87884;
  --chart-6: #7a9468;
  --chart-7: #7a8880;
  --chart-8: #9a8874;
  --chart-bar-2: #e0894a;
  --brand-end: #5aa8d8;
  --bg-glow-1: #1a3a30;
  --bg-glow-2: #1a2a3a;
  --tabs-bg: linear-gradient(180deg, #1c3d33 0%, #1a2a26 55%, #1a2220 100%);
  --ok: #3dba95;
  --ok-soft: #1c3d33;
}

html[data-mode="dark"][data-theme="blue"] {
  --accent: #4db0c0;
  --accent-deep: #8fd4de;
  --accent-hover: #3a9aaa;
  --accent-soft: #1a3338;
  --accent-rgb: 77, 176, 192;
  --chart-1: #5a9aaa;
  --chart-2: #6a82b0;
  --chart-3: #7a92a0;
  --chart-4: #68a098;
  --chart-5: #8a78a8;
  --chart-6: #a09270;
  --chart-7: #708088;
  --chart-8: #8898a4;
  --chart-bar-2: #e0894a;
  --brand-end: #5aa8d8;
  --bg-glow-1: #1a3338;
  --bg-glow-2: #1a2a3a;
  --tabs-bg: linear-gradient(180deg, #1a3338 0%, #1a2a2e 55%, #1a2220 100%);
  --ok: #4db0c0;
  --ok-soft: #1a3338;
}

html[data-mode="dark"][data-theme="red"] {
  --accent: #e07a88;
  --accent-deep: #f0a8b0;
  --accent-hover: #c85f6e;
  --accent-soft: #3a1f24;
  --accent-rgb: 224, 122, 136;
  --chart-1: #b87884;
  --chart-2: #a87898;
  --chart-3: #b89270;
  --chart-4: #9870a0;
  --chart-5: #c08890;
  --chart-6: #a88878;
  --chart-7: #907880;
  --chart-8: #c0a0a8;
  --chart-bar-2: #e0894a;
  --brand-end: #c47a9a;
  --bg-glow-1: #3a1f24;
  --bg-glow-2: #2a1a2a;
  --tabs-bg: linear-gradient(180deg, #3a1f24 0%, #2a1e22 55%, #1a2220 100%);
  --ok: #3dba95;
  --ok-soft: #1c3d33;
}

html[data-mode="dark"][data-theme="grey"] {
  --ink: #e6e9ed;
  --ink-soft: #b4bbc4;
  --muted: #8b939e;
  --paper: #12151a;
  --surface: rgb(28, 32, 38);
  --surface-solid: #1a1e24;
  --line: rgba(230, 233, 237, 0.12);
  --accent: #a8b0ba;
  --accent-deep: #d5dae0;
  --accent-hover: #929aa4;
  --accent-soft: #2a2f35;
  --accent-rgb: 168, 176, 186;
  --ink-rgb: 230, 233, 237;
  --warn: #d0b48a;
  --warn-soft: #2c261c;
  --danger: #e08a8a;
  --chart-1: #7a828c;
  --chart-2: #969ea8;
  --chart-3: #646c76;
  --chart-4: #aeb6c0;
  --chart-5: #585f68;
  --chart-6: #8a929c;
  --chart-7: #707880;
  --chart-8: #c0c6ce;
  --chart-bar-2: #c8cdd3;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  --brand-end: #9aa3ad;
  --bg-glow-1: #252a30;
  --bg-glow-2: #1c2025;
  --bg-mid: #15181d;
  --bg-end: #0e1115;
  --topbar-bg: rgba(18, 21, 26, 0.9);
  --nav-bg: rgba(26, 30, 36, 0.94);
  --card-bg: rgb(26, 30, 36);
  --card-bg-soft: rgba(26, 30, 36, 0.78);
  --muted-surface: #181c22;
  --tabs-bg: linear-gradient(180deg, #2a2f35 0%, #22262b 55%, #1a1e22 100%);
  --tabs-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  --modal-backdrop: rgba(0, 0, 0, 0.55);
  --expired-bg: rgba(44, 38, 28, 0.55);
  --nav-active-fg: #12151a;
  color-scheme: dark;
  --ok: #a8b0ba;
  --ok-soft: #2a2f35;
}

html[data-mode="dark"][data-theme="mono"] {
  --ink: #f5f5f5;
  --ink-soft: #d0d0d0;
  --muted: #9a9a9a;
  --paper: #000000;
  --surface: rgba(18, 18, 18, 0.92);
  --surface-solid: #111111;
  --line: rgba(255, 255, 255, 0.18);
  --accent: #f0f0f0;
  --accent-deep: #ffffff;
  --accent-hover: #dddddd;
  --accent-soft: #222222;
  --accent-rgb: 240, 240, 240;
  --ink-rgb: 245, 245, 245;
  --warn: #e0e0e0;
  --warn-soft: #1a1a1a;
  --danger: #ffffff;
  --chart-1: #ffffff;
  --chart-2: #c0c0c0;
  --chart-3: #909090;
  --chart-4: #707070;
  --chart-5: #e8e8e8;
  --chart-6: #a8a8a8;
  --chart-7: #808080;
  --chart-8: #585858;
  --chart-bar-2: #ffffff;
  --brand-end: #cccccc;
  --bg-glow-1: #141414;
  --bg-glow-2: #0a0a0a;
  --bg-mid: #050505;
  --bg-end: #000000;
  --topbar-bg: rgba(0, 0, 0, 0.9);
  --nav-bg: rgba(12, 12, 12, 0.95);
  --card-bg: rgba(14, 14, 14, 0.96);
  --card-bg-soft: rgba(20, 20, 20, 0.9);
  --muted-surface: #121212;
  --tabs-bg: linear-gradient(180deg, #1a1a1a 0%, #111111 55%, #0a0a0a 100%);
  --nav-active-fg: #000000;
  --ok: #f0f0f0;
  --ok-soft: #222222;
}