/* Shared tokens. theme.js resolves Light, Dark or the device appearance. */

:root {
  color-scheme: light;
  /* surfaces */
  --background: #fafafa;
  --surface: #ffffff;
  --surface-2: #f5f5f5;
  --surface-hover: #f0f0f0;

  /* text */
  --fg: #000000;
  --fg-2: #666666;
  --fg-3: #999999;
  --fg-inverse: #ffffff;

  --financial-gain: #047857;
  --financial-gain-bg: #e7f8f2;
  --financial-loss: #b91c1c;
  --financial-loss-bg: #fcebef;

  /* borders */
  --border: #eaeaea;
  --border-strong: #d4d4d4;

  /* brand */
  --primary: #000000;
  --primary-hover: #1a1a1a;
  --primary-fg: #ffffff;
  --accent: #0070f3;

  /* radius */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 9999px;

  /* shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);

  /* shell metrics */
  --header-h: 48px;
  --sidebar-w: 240px;

  /* startup-vibe accent: lime → emerald */
  --accent-from: #84cc16;   /* lime-500 */
  --accent-via:  #22d3a8;
  --accent-to:   #10b981;   /* emerald-500 */
  --accent-tint: rgba(132, 204, 22, 0.10);
  --accent-ring: rgba(16, 185, 129, 0.35);
  --accent-glow: 0 8px 28px -10px rgba(16, 185, 129, 0.45);

  /* elevation that reads as "premium" not "floating" */
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.03), 0 6px 24px -12px rgba(15, 23, 42, 0.08);
  --shadow-card-hover: 0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 36px -14px rgba(15, 23, 42, 0.14);

  /* Basecoat components use the same surfaces and text as app components. */
  --foreground: var(--fg);
  --card: var(--surface);
  --card-foreground: var(--fg);
  --popover: var(--surface);
  --popover-foreground: var(--fg);
  --secondary: var(--surface-2);
  --secondary-foreground: var(--fg);
  --muted: var(--surface-2);
  --muted-foreground: var(--fg-2);
  --accent-foreground: var(--fg);
  --input: var(--border-strong);
  --ring: var(--accent);
}

:root.dark {
  color-scheme: dark;
  --background: #111113;
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --surface-hover: #363638;
  --fg: #f5f5f7;
  --fg-2: #b5b5bc;
  --fg-3: #aaaab2;
  --financial-gain: #6ee7b7;
  --financial-gain-bg: #153d2f;
  --financial-loss: #fca5a5;
  --financial-loss-bg: #4b2427;
  --border: #3a3a3e;
  --border-strong: #686870;
  --primary: #f5f5f7;
  --primary-hover: #dedee3;
  --primary-fg: #1c1c1e;
  --accent: #80bfff;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 16%);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 24%);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 16%), 0 6px 24px -12px rgb(0 0 0 / 28%);
  --shadow-card-hover: 0 1px 2px rgb(0 0 0 / 20%), 0 14px 36px -14px rgb(0 0 0 / 36%);
}

html, body {
  background: var(--background);
  color: var(--fg);
}

body {
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--fg); color: var(--primary-fg); }

:root.dark :is(.bg-primary, .bg-fg) { color: var(--primary-fg); }