/*
 * tokens.css: the design tokens every page shares (modules/DASHBOARD#tokens, CODING_STYLE#frontend).
 *
 * Dark first on :root; the same names redefined for the light theme under
 * `@media (prefers-color-scheme: light)` for `:root:not([data-theme="dark"])`, and again under
 * `:root[data-theme="light"]` for the manual toggle (modules/DASHBOARD#preferences). The names and values are the
 * baseline mock's, plus `--chart-moved` and the asset brand map. The asset map is the one place an asset code
 * appears in the page's code (REQUIREMENTS#principles): `views/venue_identity.js` tints a badge with
 * `var(--brand-asset-<code>, var(--brand-asset-neutral))`, so an asset the map does not name takes the neutral
 * tint with no code change (modules/DASHBOARD#venue-identity).
 */

/* ==== 1. Dark theme, the default ==== */

:root {
  /* surfaces */
  --bg: #11141a;
  --bg-panel: #191e26;
  --bg-inset: #222835;
  --bg-hover: #212836;
  --bg-lift: #303a4a;

  /* ink */
  --text: #e5e9f0;
  --text-dim: #8a94a6;
  --text-faint: #6b7484;
  --border: #2c3442;
  --accent: #5b8cf5;
  --on-accent: #ffffff;

  /* semantic pairs */
  --green: #34c98e;
  --green-dim: #123528;
  --green-ink: #34c98e;
  --red: #ef6c5a;
  --red-dim: #3d1a14;
  --red-ink: #ef6c5a;
  --amber: #e6bd4f;
  --amber-dim: #3a3312;
  --amber-ink: #e6bd4f;
  --blue: #6ea0ff;
  --blue-dim: #223055;
  --blue-ink: #6ea0ff;
  --violet: #a78bfa;
  --violet-dim: #2a2145;
  --violet-ink: #a78bfa;
  --gray: #8a94a6;
  --gray-dim: #262c37;
  --gray-ink: #8a94a6;

  /* chart series */
  --chart-payoff: var(--violet);
  --chart-history: rgba(148, 163, 184, 0.55);
  --chart-cone-inner: rgba(167, 139, 250, 0.16);
  --chart-cone-outer: rgba(167, 139, 250, 0.08);
  --chart-moved: var(--amber);
  --chart-band: rgba(167, 139, 250, 0.14);

  /* heatmap cells */
  --cell-long: rgba(52, 201, 142, 0.16);
  --cell-short: rgba(239, 108, 90, 0.16);
  --cell-long-strong: rgba(52, 201, 142, 0.42);
  --cell-short-strong: rgba(239, 108, 90, 0.42);
  --cell-disabled: repeating-linear-gradient(135deg, transparent 0 3px, rgba(138, 148, 166, 0.1) 3px 4px);

  /* pop-over chrome */
  --pop-border: #000000;
  --pop-ttl: #2b3342;
  --overlay: rgba(0, 0, 0, 0.5);

  /* brand colors: one per venue (modules/VENUES#adding-a-venue) and the asset map (modules/DASHBOARD#venue-identity) */
  --brand-bybit: #f7a600;
  --brand-binance: #f0b90b;
  --brand-asset-btc: #f7931a;
  --brand-asset-eth: #627eea;
  --brand-asset-sol: #9945ff;
  --brand-asset-neutral: var(--gray);
  --brand-asset-ink: #ffffff;

  /* type stacks */
  --mono: 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;
  --sans: -apple-system, 'Segoe UI', 'Helvetica Neue', 'Arial', sans-serif;

  /* spacing */
  --gap: 12px;
  --gutter: 16px;

  /* radii and shadow */
  --radius: 8px;
  --radius-card: 6px;
  --radius-icon: 5px;
  --radius-small: 4px;
  --radius-control: 3px;
  --radius-tag: 2px;
  --radius-hair: 1px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-dialog: 0 12px 40px rgba(0, 0, 0, 0.45);

  /* the least width of a name in the header before the row wraps */
  --header-name-floor: 56px;

  /* stacking order */
  --z-lifted: 1;
  --z-raised: 2;
  --z-outlined: 3;
  --z-panel-pop: 5;
  --z-menu: 6;
  --z-callout: 8;
  --z-dialog: 10;
  --z-notifications: 20;
  --z-ghost: 50;

  color-scheme: dark;
}

/* ==== 2. Light theme, following the browser unless the operator chose dark ==== */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f2f4f7;
    --bg-panel: #ffffff;
    --bg-inset: #eef1f5;
    --bg-hover: #e9edf3;
    --bg-lift: #dfe5ee;
    --text: #1c2330;
    --text-dim: #5d6676;
    --text-faint: #8a93a3;
    --border: #d9dee6;
    --accent: #2563eb;
    --green: #0f8a5f;
    --green-dim: #d7f1e4;
    --green-ink: #0a6b49;
    --red: #c23a2b;
    --red-dim: #f8ded9;
    --red-ink: #a32b1e;
    --amber: #bd8206;
    --amber-dim: #f7efd2;
    --amber-ink: #8f6204;
    --blue: #3f6ae0;
    --blue-dim: #dbe4f8;
    --blue-ink: #2b4fb8;
    --violet: #7c5cd6;
    --violet-dim: #e8e1fa;
    --violet-ink: #5b3fb0;
    --gray: #6b7484;
    --gray-dim: #e3e6eb;
    --gray-ink: #565e6b;
    --chart-history: rgba(100, 116, 139, 0.5);
    --chart-cone-inner: rgba(124, 92, 214, 0.12);
    --chart-cone-outer: rgba(124, 92, 214, 0.06);
    --chart-band: rgba(124, 92, 214, 0.1);
    --cell-long: rgba(15, 138, 95, 0.14);
    --cell-short: rgba(194, 58, 43, 0.14);
    --cell-long-strong: rgba(15, 138, 95, 0.38);
    --cell-short-strong: rgba(194, 58, 43, 0.38);
    --cell-disabled: repeating-linear-gradient(135deg, transparent 0 3px, rgba(107, 116, 132, 0.14) 3px 4px);
    --pop-border: #1c2330;
    --pop-ttl: #d3d9e2;
    --overlay: rgba(15, 20, 30, 0.35);
    --shadow: 0 1px 3px rgba(15, 20, 30, 0.08);
    --shadow-dialog: 0 12px 40px rgba(15, 20, 30, 0.2);
    color-scheme: light;
  }
}

/* ==== 3. Light theme chosen by the operator ==== */

:root[data-theme="light"] {
  --bg: #f2f4f7;
  --bg-panel: #ffffff;
  --bg-inset: #eef1f5;
  --bg-hover: #e9edf3;
  --bg-lift: #dfe5ee;
  --text: #1c2330;
  --text-dim: #5d6676;
  --text-faint: #8a93a3;
  --border: #d9dee6;
  --accent: #2563eb;
  --green: #0f8a5f;
  --green-dim: #d7f1e4;
  --green-ink: #0a6b49;
  --red: #c23a2b;
  --red-dim: #f8ded9;
  --red-ink: #a32b1e;
  --amber: #bd8206;
  --amber-dim: #f7efd2;
  --amber-ink: #8f6204;
  --blue: #3f6ae0;
  --blue-dim: #dbe4f8;
  --blue-ink: #2b4fb8;
  --violet: #7c5cd6;
  --violet-dim: #e8e1fa;
  --violet-ink: #5b3fb0;
  --gray: #6b7484;
  --gray-dim: #e3e6eb;
  --gray-ink: #565e6b;
  --chart-history: rgba(100, 116, 139, 0.5);
  --chart-cone-inner: rgba(124, 92, 214, 0.12);
  --chart-cone-outer: rgba(124, 92, 214, 0.06);
  --chart-band: rgba(124, 92, 214, 0.1);
  --cell-long: rgba(15, 138, 95, 0.14);
  --cell-short: rgba(194, 58, 43, 0.14);
  --cell-long-strong: rgba(15, 138, 95, 0.38);
  --cell-short-strong: rgba(194, 58, 43, 0.38);
  --cell-disabled: repeating-linear-gradient(135deg, transparent 0 3px, rgba(107, 116, 132, 0.14) 3px 4px);
  --pop-border: #1c2330;
  --pop-ttl: #d3d9e2;
  --overlay: rgba(15, 20, 30, 0.35);
  --shadow: 0 1px 3px rgba(15, 20, 30, 0.08);
  --shadow-dialog: 0 12px 40px rgba(15, 20, 30, 0.2);
  color-scheme: light;
}