/* ============================================================================
   Thot — design tokens
   The same palette as the app (thot-style.css): soft surfaces, one blue
   accent, muted green and red for money, category colours only in charts.
   Dark is the default; [data-theme="light"] overrides every value.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #0b0b0c;
  --surface: #131315;
  --elev: #1a1a1e;
  --hover: #1d1d21;
  --active-bg: #1f1f24;

  /* Lines */
  --border: #242428;
  --border-strong: #34343a;
  --focus-ring: #7aa2ff;

  /* Text */
  --text: #f0f0f0;
  --muted: #9a9a9f;
  --disabled: #6a6a70;

  /* One saturated accent: what is active */
  --accent: #7aa2ff;
  --accent-strong: #9bb8ff;
  --accent-soft: rgba(122, 162, 255, 0.11);
  --accent-line: rgba(122, 162, 255, 0.36);

  /* Money, and only money */
  --money-in: #8fd19e;
  --money-out: #f2a6a6;

  /* Category colours, used only inside charts */
  --cat-0: #7aa2ff;
  --cat-1: #c8a2f5;
  --cat-2: #f5c26b;
  --cat-3: #8fd19e;
  --cat-4: #f2a6a6;

  /* The cat's collar: the only warm note outside charts */
  --gold: #e8c27a;

  /* Depth */
  --shadow-soft: 0 24px 70px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.02) inset;
  --glow: rgba(122, 162, 255, 0.1);

  /* Shape */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* Type */
  --font-display: "Silkscreen", "Courier New", monospace;
  --font-body: "Inter", "Segoe UI", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Layout */
  --container: 1160px;
  --gutter: clamp(20px, 5vw, 40px);
  --header-h: 68px;

  /* Motion */
  --t-fast: 150ms;
  --t-mid: 260ms;
  --t-slow: 480ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-theme="light"] {
  color-scheme: light;

  --bg: #f7f7f8;
  --surface: #ffffff;
  --elev: #f0f0f2;
  --hover: #ededf0;
  --active-bg: #e8e8ed;

  --border: #e2e2e6;
  --border-strong: #cfcfd6;

  --text: #141416;
  --muted: #66666c;
  --disabled: #9a9aa1;

  --accent: #3b6fe0;
  --accent-strong: #2b5bc4;
  --accent-soft: rgba(59, 111, 224, 0.09);
  --accent-line: rgba(59, 111, 224, 0.3);

  --money-in: #2f8a4c;
  --money-out: #c4504f;

  --cat-0: #3b6fe0;
  --cat-1: #8a5cd6;
  --cat-2: #c98a1e;
  --cat-3: #3f9a5c;
  --cat-4: #c4504f;

  --gold: #a97724;

  --shadow-soft: 0 24px 70px rgba(20, 20, 22, 0.12);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  --glow: rgba(59, 111, 224, 0.1);
}