/* =============================================================================
   Market Hunters Club — design tokens
   ALL colors live here. Components reference var(--color-*), never hex.
   Dark is the default; the light theme overrides the same names.
   Source of truth for the visual language: style-guide.html
   ========================================================================== */

:root,
:root[data-theme="dark"] {
  /* --- brand ------------------------------------------------------------- */
  --color-brand: #d4af37;
  --color-brand-hover: #e6c263;
  --color-brand-strong: #b8942a;
  --color-brand-soft: rgba(212, 175, 55, 0.12);
  --color-brand-line: rgba(212, 175, 55, 0.35);
  --color-on-brand: #000000;
  --color-brand-grad-from: #f0d78a;
  --color-brand-grad-to: #b8942a;

  /* --- market semantics: buy/sell, profit/loss, up/down ONLY ------------ */
  --color-buy: #16c784;
  --color-buy-soft: rgba(22, 199, 132, 0.14);
  --color-buy-strong: #0fa86d;
  --color-on-buy: #00110a;
  --color-sell: #ea3943;
  --color-sell-soft: rgba(234, 57, 67, 0.14);
  --color-sell-strong: #c92a34;
  --color-on-sell: #ffffff;

  /* --- neutrals --------------------------------------------------------- */
  --color-bg: #000000;
  --color-bg-subtle: #0a0a0b;
  --color-surface: #111113;
  --color-surface-2: #18181b;
  --color-surface-3: #212125;
  --color-border: #26262b;
  --color-border-strong: #3a3a41;
  --color-text: #ffffff;
  --color-text-2: #b4b4bc;
  --color-text-3: #7c7c86;
  --color-text-inv: #000000;

  /* --- effects ---------------------------------------------------------- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  --glow: 0 0 0 1px var(--color-brand-line), 0 0 24px rgba(212, 175, 55, 0.18);
  --scrim: rgba(0, 0, 0, 0.7);
  /* mask alpha channel: opaque reveal, not a UI color */
  --mask-opaque: #000000;

  /* --- typography ------------------------------------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --text-display: 44px;
  --text-h1: 32px;
  --text-h2: 22px;
  --text-h3: 16px;
  --text-body: 14px;
  --text-small: 12px;
  --text-eyebrow: 11px;

  /* --- spacing (4px grid) ----------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* --- radius ----------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* --- control heights -------------------------------------------------- */
  --control-sm: 30px;
  --control-md: 38px;
  --control-lg: 48px;
  --control-input: 40px;
}

:root[data-theme="light"] {
  --color-brand: #b8942a;
  --color-brand-hover: #a8831f;
  --color-brand-strong: #8f721f;
  --color-brand-soft: rgba(184, 148, 42, 0.12);
  --color-brand-line: rgba(184, 148, 42, 0.4);
  --color-on-brand: #ffffff;
  --color-brand-grad-from: #e6c263;
  --color-brand-grad-to: #8f721f;

  --color-buy: #0fa86d;
  --color-buy-soft: rgba(15, 168, 109, 0.12);
  --color-buy-strong: #0b8a59;
  --color-on-buy: #ffffff;
  --color-sell: #d92d38;
  --color-sell-soft: rgba(217, 45, 56, 0.12);
  --color-sell-strong: #b5242d;
  --color-on-sell: #ffffff;

  --color-bg: #ffffff;
  --color-bg-subtle: #f6f6f7;
  --color-surface: #ffffff;
  --color-surface-2: #f3f3f5;
  --color-surface-3: #e8e8ec;
  --color-border: #e2e2e7;
  --color-border-strong: #c9c9d1;
  --color-text: #000000;
  --color-text-2: #4a4a53;
  --color-text-3: #83838d;
  --color-text-inv: #ffffff;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  --glow: 0 0 0 1px var(--color-brand-line), 0 0 20px rgba(184, 148, 42, 0.15);
  --scrim: rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
  }
}