/* financeninja — design tokens on Amir's "Main Monochrome Signal" system v3.0.0 (prompts/Design System/).
   White carries the content, rich black makes the structure, orange (#FF5C00) punctuates once.
   Exception, stated: this app is English, so Inter replaces Estedad/Vazirmatn and long reading uses Literata. */

@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../fonts/literata-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../fonts/literata-latin-wght-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-wght-normal.woff2") format("woff2"); font-weight: 600 800; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --page: #ffffff; --surface: #ffffff; --surface-2: #fafafa; --surface-3: #f0f0f0; --overlay: rgba(9, 9, 10, .32);
  --ink: #09090a; --ink-2: #29292b; --muted: #68686b; --faint: #929295;
  --line: #e5e5e5; --line-strong: #b9b9bb;
  /* "accent" is structure: rich black. Orange is --signal and is used once per screen at most. */
  --accent: #111112; --accent-strong: #000000; --accent-ink: #09090a; --accent-soft: #f0f0f0; --accent-soft-2: #e5e5e5; --on-accent: #ffffff;
  --signal: #ff5c00; --signal-soft: #fff0e7;
  --good: #1d7a55; --good-ink: #1d7a55; --good-soft: #e7f3ed;
  --bad: #bc3d4c;  --bad-ink: #bc3d4c;  --bad-soft: #f9e8eb;
  --warn: #976100; --warn-ink: #976100; --warn-soft: #f8efd9;
  --cfa-ink: #09090a; --cfa-soft: #f0f0f0; --sw-ink: #09090a; --sw-soft: #f0f0f0;
  /* mastery: one grey ramp to black */
  --m0: #f0f0f0; --m1: #d4d4d6; --m2: #9c9c9f; --m3: #4a4a4d; --m4: #09090a;

  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-read: "Literata", Georgia, "Times New Roman", serif;
  --font-num: "Archivo", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --fs-xs: 11.5px; --fs-sm: 13px; --fs-md: 14.5px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 28px; --fs-3xl: 34px;
  --fs-read: 17.5px; --lh-read: 1.72;

  --r-sm: 8px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px; --r-pill: 999px;
  --shadow-1: none; --shadow-2: none; --shadow-3: 0 12px 32px rgba(9, 9, 10, .14);
  --ring: 0 0 0 3px rgba(9, 9, 10, .14);

  --sidebar-w: 232px; --content-w: 1200px; --read-w: 700px; --topbar-h: 52px; --bottombar-h: 60px;
  --ease: cubic-bezier(.2, .7, .2, 1); --t-fast: 120ms; --t-med: 200ms;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --_dark: 1; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0f0f10; --surface: #0f0f10; --surface-2: #18181a; --surface-3: #232326; --overlay: rgba(0, 0, 0, .6);
    --ink: #f4f4f5; --ink-2: #d4d4d6; --muted: #9a9a9e; --faint: #6c6c70;
    --line: #26262a; --line-strong: #3d3d42;
    --accent: #f4f4f5; --accent-strong: #ffffff; --accent-ink: #f4f4f5; --accent-soft: #232326; --accent-soft-2: #2e2e32; --on-accent: #09090a;
    --signal-soft: rgba(255, 92, 0, .14);
    --good: #4fb486; --good-ink: #6cc79c; --good-soft: rgba(79, 180, 134, .12);
    --bad: #e06a78; --bad-ink: #ec8d98; --bad-soft: rgba(224, 106, 120, .12);
    --warn: #d9a441; --warn-ink: #e4b866; --warn-soft: rgba(217, 164, 65, .12);
    --cfa-ink: #f4f4f5; --cfa-soft: #232326; --sw-ink: #f4f4f5; --sw-soft: #232326;
    --m0: #232326; --m1: #3d3d42; --m2: #6c6c70; --m3: #b9b9bb; --m4: #f4f4f5;
    --shadow-3: 0 16px 40px rgba(0, 0, 0, .6); --ring: 0 0 0 3px rgba(255, 255, 255, .18);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0f0f10; --surface: #0f0f10; --surface-2: #18181a; --surface-3: #232326; --overlay: rgba(0, 0, 0, .6);
  --ink: #f4f4f5; --ink-2: #d4d4d6; --muted: #9a9a9e; --faint: #6c6c70;
  --line: #26262a; --line-strong: #3d3d42;
  --accent: #f4f4f5; --accent-strong: #ffffff; --accent-ink: #f4f4f5; --accent-soft: #232326; --accent-soft-2: #2e2e32; --on-accent: #09090a;
  --signal-soft: rgba(255, 92, 0, .14);
  --good: #4fb486; --good-ink: #6cc79c; --good-soft: rgba(79, 180, 134, .12);
  --bad: #e06a78; --bad-ink: #ec8d98; --bad-soft: rgba(224, 106, 120, .12);
  --warn: #d9a441; --warn-ink: #e4b866; --warn-soft: rgba(217, 164, 65, .12);
  --cfa-ink: #f4f4f5; --cfa-soft: #232326; --sw-ink: #f4f4f5; --sw-soft: #232326;
  --m0: #232326; --m1: #3d3d42; --m2: #6c6c70; --m3: #b9b9bb; --m4: #f4f4f5;
  --shadow-3: 0 16px 40px rgba(0, 0, 0, .6); --ring: 0 0 0 3px rgba(255, 255, 255, .18);
}
@media (max-width: 760px) { :root { --fs-md: 15px; --fs-read: 17px; --fs-2xl: 24px; --fs-3xl: 28px; } }
@media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-med: 0ms; } }