/* ============================================================
   ezpztrader.com — design tokens

   Identity: "live wire." The site should feel plugged into
   something running. Deep violet-black ground, electric violet
   as the brand accent, warm gold as the second accent for
   moments that matter (CTAs, fills, numbers). Two accents, not
   one neon pop — the pairing is what makes it read as designed.

   Buy/sell stay separate semantic colors so market direction is
   never confused with brand color.

   Dark is the default (server-rendered, see
   common/context_processors.py). Light is a designed counterpart,
   not an inversion: lavender-tinted paper rather than plain white.
   ============================================================ */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* ---- ground ---- */
  --bg: #0B0918;
  --bg-sunken: #060411;
  --bg-raised: #141029;
  --bg-elevated: #1B1539;

  /* ---- ink ---- */
  --ink: #F3F0FF;
  --ink-soft: #B3AAD6;
  --ink-faint: #7A719E;

  /* ---- structure ---- */
  --line: #2A2350;
  --line-soft: #1D1839;

  /* ---- accent 1: electric violet ---- */
  --accent: #9B6BFF;
  --accent-strong: #B189FF;
  --accent-ink: #C6ACFF;
  --accent-soft: rgba(155, 107, 255, 0.14);
  --accent-glow: rgba(155, 107, 255, 0.45);
  --on-accent: #0B0918;

  /* ---- accent 1b: magenta, bridges violet → gold in ramps ---- */
  --magenta: #D96BFF;
  --magenta-soft: rgba(217, 107, 255, 0.14);

  /* ---- accent 2: signal gold ---- */
  --gold: #FFB547;
  --gold-ink: #FFC978;
  --gold-soft: rgba(255, 181, 71, 0.13);
  --on-gold: #17100A;

  /* ---- composed ramps ---- */
  --ramp: linear-gradient(102deg, var(--accent) 0%, var(--magenta) 48%, var(--gold) 100%);
  --ramp-soft: linear-gradient(102deg, var(--accent-soft), var(--magenta-soft), var(--gold-soft));
  --spotlight: rgba(155, 107, 255, 0.16);

  /* ---- semantic market direction ---- */
  --buy: #3DDC97;
  --buy-soft: rgba(61, 220, 151, 0.13);
  --sell: #FF6B7A;
  --sell-soft: rgba(255, 107, 122, 0.13);

  /* ---- extra tile colour (broker badge cycle, etc.) ---- */
  --tile-blue: #6FA0FF;
  --tile-blue-soft: rgba(80, 140, 255, 0.13);

  /* ---- data surfaces ---- */
  --code-bg: #070513;
  --code-ink: #DDD6FF;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 18px 44px rgba(4, 2, 18, 0.6);
  --shadow-glow: 0 0 0 1px var(--accent-soft), 0 18px 50px -12px var(--accent-glow);
}

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

  --bg: #F6F4FF;
  --bg-sunken: #EBE6FA;
  --bg-raised: #FFFFFF;
  --bg-elevated: #FFFFFF;

  --ink: #15113A;
  --ink-soft: #514A7C;
  --ink-faint: #8880AD;

  --line: #DFD9F5;
  --line-soft: #EDE9FB;

  --accent: #6D3EE8;
  --accent-strong: #5B2FD4;
  --accent-ink: #5628CE;
  --accent-soft: rgba(109, 62, 232, 0.10);
  --accent-glow: rgba(109, 62, 232, 0.28);
  --on-accent: #FFFFFF;

  --magenta: #A62FC9;
  --magenta-soft: rgba(166, 47, 201, 0.10);

  --gold: #A96A00;
  --gold-ink: #8A5600;
  --gold-soft: rgba(169, 106, 0, 0.11);
  --on-gold: #FFFFFF;

  --ramp: linear-gradient(102deg, var(--accent) 0%, var(--magenta) 48%, var(--gold) 100%);
  --ramp-soft: linear-gradient(102deg, var(--accent-soft), var(--magenta-soft), var(--gold-soft));
  --spotlight: rgba(109, 62, 232, 0.10);

  --buy: #0C8F5B;
  --buy-soft: rgba(12, 143, 91, 0.11);
  --sell: #CF3244;
  --sell-soft: rgba(207, 50, 68, 0.10);

  --tile-blue: #3D5CC7;
  --tile-blue-soft: rgba(80, 110, 230, 0.1);

  --code-bg: #16123A;
  --code-ink: #E4DEFF;

  --shadow-1: 0 1px 2px rgba(21, 17, 58, 0.06);
  --shadow-2: 0 18px 44px rgba(21, 17, 58, 0.12);
  --shadow-glow: 0 0 0 1px var(--accent-soft), 0 18px 50px -14px var(--accent-glow);
}

:root {
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 100px;

  --font-display: "Bricolage Grotesque", "Manrope", -apple-system, sans-serif;
  --font-body: "Manrope", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --container: 1440px;
  --measure: 62ch;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}