/* ==========================================================================
   QT Trading Lab — Nocturne glass tokens
   The single source of truth for color, type, radius, elevation and glass.
   Primitives match Edge Optimizer (edge-optimizer/cloud/app/client/
   nocturne-tokens.css) so both products read as one family.
   Link this before any other stylesheet. Plan: docs/site-redesign-plan.md
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Nocturne primitives ---- */
  --color-bg: #161826;
  --color-surface: #232532;
  --color-raised: #2f313d;   /* surface lifted one step: hovers, inset fields */
  --color-sunken: #11131e;   /* slide player, chart and diagram grounds */
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);
  --color-divider-strong: color-mix(in srgb, #e9e9ed 26%, transparent);

  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;
  --color-accent-900: #2b2741;

  /* Text tiers. The accent is ~3:1 on the ground: chrome and large text only,
     so small accent text uses --color-accent-300. */
  --color-text-muted: var(--color-neutral-400);
  --color-text-faint: var(--color-neutral-500);

  /* ---- Trading semantics — identical to Edge Optimizer ---- */
  --pl-pos: #3ddc97;
  --pl-neg: #ff5c63;
  --pl-warn: #f2b34a;
  --pl-pos-deep: #2b9b6d;    /* filled candle bodies */
  --pl-neg-deep: #c9474d;

  /* ---- Charts (canvas needs resolved hex, so no color-mix here) ---- */
  --chart-grid: #1f2130;
  --chart-axis: #3f424d;

  /* ---- Glass ---- */
  --glass-fill: color-mix(in srgb, var(--color-surface) 92%, transparent);
  --glass-fill-bar: color-mix(in srgb, var(--color-surface) 78%, transparent);
  --glass-blur: blur(18px) saturate(1.12);
  --page-glow-a: color-mix(in srgb, var(--color-accent) 22%, transparent);
  --page-glow-b: color-mix(in srgb, var(--color-accent) 10%, transparent);
  --page-background:
    radial-gradient(circle at 20% -10%, var(--page-glow-a), transparent 28rem),
    radial-gradient(circle at 86% 0%, var(--page-glow-b), transparent 24rem),
    var(--color-bg);

  /* ---- Type ---- */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: var(--font-body);
  --font-heading-weight: 500;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* ---- Scale (Nocturne density 0.7×) ---- */
  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-6: 16.8px;
  --space-8: 22.4px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* Elevation: a hairline edge plus ambient darkness */
  --shadow-sm: 0 0 0 1px var(--color-neutral-800);
  --shadow-md: 0 0 0 1px var(--color-neutral-700), 0 6px 18px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 0 0 1px var(--color-neutral-500), 0 16px 40px rgba(0, 0, 0, 0.65);

  /* ==========================================================================
     LEGACY ALIASES — the old variable names, re-pointed at the tokens above.
     Delete an alias once nothing reads it.
     ========================================================================== */

  /* Course renderers: inline styles in course-app.js still read --ink* */
  --bg: var(--color-bg);
  --surface: var(--glass-fill);
  --surface2: var(--color-raised);
  --border: var(--color-divider);
  --border2: var(--color-divider-strong);
  --ink: var(--color-text);
  --ink2: var(--color-text-muted);
  --ink3: var(--color-text-faint);
  --gold: var(--color-accent);
  --gold2: var(--color-accent-600);
  --gold-glow: color-mix(in srgb, var(--color-accent) 14%, transparent);
  --cyan: var(--color-accent-300);
  --blue: var(--color-accent);
  --green: var(--pl-pos);
  --red: var(--pl-neg);
  --sidebar: 260px;

  /* Slide player: qt-slideshow.css */
  --qt-bg: var(--color-bg);
  --qt-bg-card: var(--color-surface);
  --qt-bg-surface: var(--color-raised);
  --qt-bg-player: var(--color-sunken);
  --qt-border: var(--color-divider);
  --qt-border-light: var(--color-divider-strong);
  --qt-text: var(--color-text);
  --qt-text-sec: var(--color-text-muted);
  --qt-text-muted: var(--color-text-faint);
  --qt-blue: var(--color-accent);
  --qt-blue-dim: color-mix(in srgb, var(--color-accent) 8%, transparent);
  --qt-blue30: color-mix(in srgb, var(--color-accent) 19%, transparent);
  --qt-green: var(--pl-pos);
  --qt-green-dim: color-mix(in srgb, var(--pl-pos) 8%, transparent);
  --qt-green30: color-mix(in srgb, var(--pl-pos) 19%, transparent);
  --qt-red: var(--pl-neg);
  --qt-red-dim: color-mix(in srgb, var(--pl-neg) 8%, transparent);
  --qt-amber: var(--pl-warn);
  --qt-amber-dim: color-mix(in srgb, var(--pl-warn) 8%, transparent);
  --qt-amber30: color-mix(in srgb, var(--pl-warn) 19%, transparent);
  --qt-purple: var(--color-accent-400);
  --qt-radius: var(--radius-md);
  --qt-radius-sm: var(--radius-sm);
  --qt-font: var(--font-body);
  --qt-mono: var(--font-mono);

  /* Older page styles: dictionary.html, advanced.html */
  --bg-primary: var(--color-bg);
  --bg-card: var(--glass-fill);
  --bg-card-hover: var(--color-raised);
  --bg-surface: var(--color-raised);
  --border-light: var(--color-divider-strong);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-muted);
  --text-muted: var(--color-text-faint);
  --accent-blue: var(--color-accent);
  --accent-blue-dim: var(--color-accent-600);
  --accent-green: var(--pl-pos);
  --accent-amber: var(--pl-warn);
  --accent-purple: var(--color-accent-400);
  --accent-red: var(--pl-neg);
  --tag-framework: color-mix(in srgb, var(--color-accent) 13%, transparent);
  --tag-framework-text: var(--color-accent-300);
  --tag-structure: color-mix(in srgb, var(--pl-pos) 13%, transparent);
  --tag-structure-text: var(--pl-pos);
  --tag-strategy: color-mix(in srgb, var(--pl-warn) 13%, transparent);
  --tag-strategy-text: var(--pl-warn);
  --tag-risk: color-mix(in srgb, var(--pl-neg) 13%, transparent);
  --tag-risk-text: var(--pl-neg);
  --tag-psych: color-mix(in srgb, var(--color-accent-400) 13%, transparent);
  --tag-psych-text: var(--color-accent-400);
  --radius: var(--radius-md);
  --candle-bull: var(--pl-pos);
  --candle-bear: var(--pl-neg);
  --candle-bull-body: var(--pl-pos-deep);
  --candle-bear-body: var(--pl-neg-deep);
  --level-line: var(--color-accent);
  --level-line-dim: color-mix(in srgb, var(--color-accent) 25%, transparent);
}