/**
 * quiXzoom Design Tokens
 * Sport-Tech / Nike-vibes
 * Dark energy, neon precision, kinetic motion
 *
 * Usage: Import this file first, then apply tokens in component CSS.
 * All values are CSS custom properties — never hardcode raw values.
 */

:root {

  /* ─── GRAYSCALE ──────────────────────────────────────────────────────────── */
  /* Light → Deep Carbon (dark-first palette) */
  --qx-white:        #FFFFFF;
  --qx-gray-100:     #F0F0F0;  /* Near-white surface */
  --qx-gray-400:     #888888;  /* Muted text, placeholders */
  --qx-gray-700:     #2A2A2A;  /* Secondary surfaces */
  --qx-deep-carbon:  #0D0D0D;  /* Primary background */

  /* ─── ACCENT COLORS ──────────────────────────────────────────────────────── */
  --qx-neon-primary:    #00FF87;  /* Electric green — primary CTA, highlights */
  --qx-neon-secondary:  #00D1FF;  /* Cyan — links, hover states, secondary actions */

  /* Accent with alpha for glows/overlays */
  --qx-neon-primary-20:   rgba(0, 255, 135, 0.20);
  --qx-neon-primary-10:   rgba(0, 255, 135, 0.10);
  --qx-neon-secondary-20: rgba(0, 209, 255, 0.20);

  /* ─── SEMANTIC COLORS ────────────────────────────────────────────────────── */
  --qx-bg:            var(--qx-deep-carbon);
  --qx-bg-surface:    var(--qx-gray-700);
  --qx-text-primary:  var(--qx-white);
  --qx-text-muted:    var(--qx-gray-400);
  --qx-border:        rgba(255, 255, 255, 0.08);
  --qx-border-accent: var(--qx-neon-primary);

  /* ─── SPACING (8px base grid) ────────────────────────────────────────────── */
  --qx-space-xs:  4px;
  --qx-space-sm:  8px;
  --qx-space-md:  16px;
  --qx-space-lg:  32px;
  --qx-space-xl:  64px;
  --qx-space-2xl: 96px;
  --qx-space-3xl: 128px;

  /* ─── TYPOGRAPHY ─────────────────────────────────────────────────────────── */
  /* Font stack */
  --qx-font-sans:    'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --qx-font-display: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --qx-font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Type scale — LOCKED, do not interpolate between these */
  --qx-text-xs:   12px;
  --qx-text-sm:   16px;
  --qx-text-md:   24px;
  --qx-text-lg:   48px;
  --qx-text-xl:   64px;

  /* Font weights */
  --qx-weight-regular: 400;
  --qx-weight-medium:  500;
  --qx-weight-bold:    700;
  --qx-weight-black:   900;

  /* Line heights */
  --qx-leading-tight:  1.0;   /* Display / hero headlines */
  --qx-leading-snug:   1.2;   /* Subheadings */
  --qx-leading-base:   1.5;   /* Body text */

  /* Letter spacing */
  --qx-tracking-tight:  -0.03em;  /* Large display text */
  --qx-tracking-normal:  0em;
  --qx-tracking-wide:    0.08em;  /* Caps labels, badges */
  --qx-tracking-widest:  0.15em; /* Eyebrow text */

  /* ─── EASING ──────────────────────────────────────────────────────────────── */
  /* Signature quiXzoom spring — fast out, sharp entry */
  --qx-ease-snap:    cubic-bezier(0.16, 1, 0.3, 1);
  /* Standard ease for UI micro-interactions */
  --qx-ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1);
  /* Dramatic enter for hero elements */
  --qx-ease-enter:   cubic-bezier(0.22, 1, 0.36, 1);
  /* Subtle ease for hover states */
  --qx-ease-hover:   cubic-bezier(0.4, 0, 0.2, 1);

  /* Duration */
  --qx-duration-fast:   150ms;
  --qx-duration-base:   300ms;
  --qx-duration-slow:   600ms;
  --qx-duration-hero:   900ms;

  /* ─── BORDER RADIUS ──────────────────────────────────────────────────────── */
  --qx-radius-none:  0px;
  --qx-radius-sm:    4px;
  --qx-radius-md:    8px;
  --qx-radius-lg:    16px;
  --qx-radius-pill:  9999px;

  /* ─── SHADOW SYSTEM ──────────────────────────────────────────────────────── */
  /* Dark-theme shadows use colored glows, not black opacity */
  --qx-shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.4);

  --qx-shadow-md:
    0 4px 16px rgba(0, 0, 0, 0.5),
    0 1px 4px  rgba(0, 0, 0, 0.3);

  --qx-shadow-lg:
    0 8px 32px rgba(0, 0, 0, 0.6),
    0 2px 8px  rgba(0, 0, 0, 0.4);

  /* Neon glow — apply to CTAs and accent elements */
  --qx-shadow-neon-primary:
    0 0 0 1px var(--qx-neon-primary-20),
    0 0 16px  var(--qx-neon-primary-20),
    0 0 32px  var(--qx-neon-primary-10);

  --qx-shadow-neon-secondary:
    0 0 0 1px var(--qx-neon-secondary-20),
    0 0 16px  var(--qx-neon-secondary-20);

  /* Inset glow — active states */
  --qx-shadow-inset-neon:
    inset 0 0 0 1px var(--qx-neon-primary-20);

  /* ─── Z-INDEX SCALE ──────────────────────────────────────────────────────── */
  --qx-z-base:    0;
  --qx-z-raised:  10;
  --qx-z-overlay: 100;
  --qx-z-modal:   200;
  --qx-z-toast:   300;

  /* ─── TRANSITIONS (shorthand helpers) ───────────────────────────────────── */
  --qx-transition-color:
    color      var(--qx-duration-fast) var(--qx-ease-hover),
    background var(--qx-duration-fast) var(--qx-ease-hover),
    border-color var(--qx-duration-fast) var(--qx-ease-hover);

  --qx-transition-transform:
    transform  var(--qx-duration-base) var(--qx-ease-snap);

  --qx-transition-all:
    all        var(--qx-duration-base) var(--qx-ease-snap);

}

/* ─── UTILITY: APPLY DARK BG ─────────────────────────────────────────────── */
.qx-theme {
  background-color: var(--qx-bg);
  color: var(--qx-text-primary);
  font-family: var(--qx-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}