/*
 * Voltrium website design tokens — "Voltage" direction.
 * Mirrors app/src/renderer/styles/tokens.css exactly. Every color/spacing/
 * motion value used by page CSS MUST come from these custom properties.
 * No ad-hoc hex values outside this file.
 */
:root {
  /* Color — cool near-black surfaces, electric-cyan accent + violet glow */
  --bg-0: #0a0b0f; /* base surface */
  --bg-1: #12141b; /* cards */
  --bg-2: #1a1d27; /* hover / elevation */
  --line: #262a36; /* hairlines */

  --text-1: #eaf2ff;
  --text-2: #8a93a6;

  --accent: #22e3ff; /* electric cyan — primary brand color */
  --accent-press: #12c2e0;
  --accent-ink: #041519; /* text on accent-filled surfaces */
  --accent-2: #7c5cff; /* violet — secondary glow, gradients/highlights only */

  --up: #35d6a4; /* price/success data only, never branding */
  --down: #ff5c7a; /* price/error data only, never branding */

  --overlay: rgba(10, 11, 15, 0.72); /* bg-0 at 72% */

  /* Radius */
  --radius: 10px;
  --radius-sm: 7px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Elevation */
  --shadow-1:
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 10px 28px rgba(0, 0, 0, 0.5);
  /* Neon glow — the signature. Reserve for the primary action + focus rings. */
  --glow-accent:
    0 0 0 1px rgba(34, 227, 255, 0.35),
    0 0 22px rgba(34, 227, 255, 0.22);

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 160ms;
  --dur: 220ms;
  --dur-slow: 240ms;

  /* Typography */
  --font-ui: 'Inter Variable', Inter, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --fw-body: 400;
  --fw-medium: 500;
  --fw-display: 650; /* Inter Variable axis value, display/wordmark use only */
  --fw-black: 850; /* stamped display weight for the voltage hero */

  /* Runtime — written by app.js from real scroll progress */
  --charge: 0;

  /* ---- "Voltage" extensions (added; core palette above is locked) ---- */

  /* The voltage gradient — cyan potential rising to violet. The one bold,
     recurring gesture: hero conductor, primary CTA, accent word. */
  --grad-volt: linear-gradient(115deg, var(--accent) 0%, #4bd4ff 42%, var(--accent-2) 100%);
  --grad-volt-soft: linear-gradient(120deg, rgba(34, 227, 255, 0.14), rgba(124, 92, 255, 0.14));

  /* Dim engineered grid for the hero backdrop */
  --grid-line: rgba(124, 138, 168, 0.08);

  /* Bloom / glow reserved for the two loud moments (hero V + primary CTA) */
  --bloom-cyan: rgba(34, 227, 255, 0.42);
  --bloom-violet: rgba(124, 92, 255, 0.36);
  --glow-cta:
    0 0 0 1px rgba(34, 227, 255, 0.45),
    0 8px 24px rgba(34, 227, 255, 0.14),
    0 0 40px rgba(34, 227, 255, 0.20);

  /* Wider spacing rungs for full-bleed marketing rhythm */
  --space-9: 96px;
  --space-10: 128px;

  /* Content measure */
  --wide: 1200px;
  --measure: 1080px;

  --dur-slower: 640ms;
}