/* Hendr1ka tokens.css — Phase 1 Foundation
 * Only vars that theme.json cannot express: motion, shadows, scrollbar, selection, gradients, filter glows.
 * Flat hex colors live in theme.json palette — NOT repeated here.
 */

:root {
  /* Font stack aliases (for use in component CSS — theme.json manages @font-face) */
  --font-display: 'Orbitron', 'IBM Plex Mono', monospace;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Orbitron', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Motion — duration */
  --dur-instant: 100ms;
  --dur-fast:    150ms;
  --dur-base:    300ms;
  --dur-slow:    500ms;
  --dur-slower:  800ms;

  /* Motion — easing */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-cyber:  cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Transition shorthands */
  --transition-fast: var(--dur-fast) var(--ease-in-out);
  --transition-base: var(--dur-base) var(--ease-in-out);

  /* Shadows — portfolio system (magenta -- do not use in store components) */
  --shadow-neon-pink:      0 0 20px rgba(255, 0, 255, 0.5);
  --shadow-neon-text-pink: 0 0 10px rgba(255, 0, 255, 0.8), 0 0 20px rgba(255, 0, 255, 0.6), 0 0 40px rgba(255, 0, 255, 0.4);

  /* Shadows — store system (hot pink #FF0080 -- use these in all WooCommerce components) */
  --shadow-store-pink:      0 0 20px rgba(255, 0, 128, 0.5);
  --shadow-store-text-pink: 0 0 10px rgba(255, 0, 128, 0.8), 0 0 20px rgba(255, 0, 128, 0.6), 0 0 40px rgba(255, 0, 128, 0.4);
  --border-store-pink:      1px solid rgba(255, 0, 128, 0.5);

  /* Shadows — cyan + purple (no magenta issue) */
  --shadow-neon-cyan:       0 0 20px rgba(0, 255, 255, 0.5);
  --shadow-neon-text-cyan:  0 0 10px rgba(0, 255, 255, 0.8), 0 0 20px rgba(0, 255, 255, 0.6), 0 0 40px rgba(0, 255, 255, 0.4);
  --shadow-neon-purple:     0 0 20px rgba(157, 0, 255, 0.5);
  --shadow-neon-glow:       0 0 30px rgba(157, 0, 255, 0.3);
  --shadow-card-hover:      0 0 30px rgba(138, 43, 226, 0.20), 0 0 60px rgba(0, 255, 255, 0.10);

  /* Filter glows */
  --filter-glow-pink: drop-shadow(0 0 10px #FF0080) drop-shadow(0 0 20px #FF0080);
  --filter-glow-cyan: drop-shadow(0 0 10px #00FFFF) drop-shadow(0 0 20px #00FFFF);

  /* Gradient vars */
  --gradient-brand:        linear-gradient(90deg, #FF00FF 0%, #9D00FF 50%, #00FFFF 100%);
  --gradient-store-hero:   linear-gradient(45deg, #FF0080 0%, #FF1493 100%);
  --gradient-page-ambient: radial-gradient(ellipse at top, rgba(157, 0, 255, 0.10) 0%, transparent 50%), radial-gradient(ellipse at bottom, rgba(0, 255, 255, 0.05) 0%, transparent 50%);

  /* Backdrop blur */
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 24px;

  /* Store color override — primary is hot-pink, not portfolio magenta */
  --color-primary: #FF0080;
  --color-secondary: #00FFFF;
}

/* Scrollbar */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #12121A; }
::-webkit-scrollbar-thumb { background: rgba(157, 0, 255, 0.5); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #9D00FF; }

/* Selection */
::selection {
  background: rgba(157, 0, 255, 0.30);
  color: #FFFFFF;
}