/**
 * 🎮 CODEMASTER / ARCADE VAULT - TACTICAL TERMINAL DESIGN SYSTEM
 * -------------------------------------------------------------
 * Ultra-crisp, tactile gaming aesthetic for 41-web-new
 * Author: Antigravity Studio Lead Designer
 */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* 🎨 6 Core Design Tokens */
  --obsidian-canvas: #0B0E14;
  --vault-surface: #141A24;
  --vault-surface-raised: #1C2433;
  --vault-surface-subtle: #0F141D;
  --tactical-border: #232C3D;
  --tactical-border-light: #2E3A4E;
  --tactical-border-focus: #00F5A0;

  --quantum-mint: #00F5A0;
  --quantum-mint-glow: rgba(0, 245, 160, 0.25);
  --quantum-mint-subtle: rgba(0, 245, 160, 0.08);

  --solar-amber: #FFB800;
  --solar-amber-glow: rgba(255, 184, 0, 0.25);
  --solar-amber-subtle: rgba(255, 184, 0, 0.10);

  --signal-crimson: #FF3B69;
  --signal-crimson-glow: rgba(255, 59, 105, 0.25);
  --signal-crimson-subtle: rgba(255, 59, 105, 0.10);

  --text-primary: #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-muted: #8492A6;
  --text-dim: #4B5563;

  /* Typography */
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
}

/* ====================================================================
   1. GLOBAL CANVAS & TYPOGRAPHY RESETS
   ==================================================================== */

html, body {
  background-color: var(--obsidian-canvas) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  background-image: 
    radial-gradient(ellipse 90% 50% at 50% -20%, rgba(0, 245, 160, 0.05), transparent),
    radial-gradient(ellipse 60% 40% at 90% 15%, rgba(255, 184, 0, 0.03), transparent),
    radial-gradient(ellipse 50% 50% at 10% 40%, rgba(255, 59, 105, 0.03), transparent);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, .font-gaming, .font-heading {
  font-family: var(--font-heading) !important;
  letter-spacing: -0.02em;
}

code, pre, .font-mono, .code-pill, .price-display {
  font-family: var(--font-mono) !important;
}

::selection {
  background: var(--quantum-mint) !important;
  color: #061A12 !important;
}

/* Tactical Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--obsidian-canvas);
}
::-webkit-scrollbar-thumb {
  background: var(--tactical-border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--quantum-mint);
  box-shadow: 0 0 10px var(--quantum-mint-glow);
}

/* ====================================================================
   2. VAULT SURFACE & GLASS PANELS
   ==================================================================== */

.bg-cyber-bg, .bg-\[\#090d16\] {
  background-color: var(--obsidian-canvas) !important;
}

.glass-panel,
.bg-slate-900,
.bg-slate-900\/90,
.bg-slate-900\/80,
.bg-slate-900\/95,
.bg-slate-900\/70,
.bg-slate-900\/60,
.bg-slate-900\/40 {
  background-color: var(--vault-surface) !important;
}

.bg-slate-950,
.bg-slate-950\/90,
.bg-slate-950\/80,
.bg-slate-950\/70,
.bg-slate-950\/60,
.bg-slate-950\/85 {
  background-color: var(--vault-surface-subtle) !important;
}

.bg-slate-800,
.bg-slate-800\/90,
.bg-slate-800\/80,
.bg-slate-800\/70,
.bg-slate-800\/60 {
  background-color: var(--vault-surface-raised) !important;
}

/* Clean 1px Tactical Borders */
.border-slate-800,
.border-slate-800\/80,
.border-slate-800\/90,
.divide-slate-800\/60 {
  border-color: var(--tactical-border) !important;
}

.border-slate-700,
.border-slate-700\/80,
.border-slate-700\/70,
.border-slate-700\/60 {
  border-color: var(--tactical-border-light) !important;
}

/* ====================================================================
   3. ACCENT COLORS & TACTICAL TOKENS
   ==================================================================== */

/* Quantum Mint Accents */
.text-cyan-400, .text-cyan-300, .text-cyan-200 {
  color: var(--quantum-mint) !important;
}

.border-cyan-500,
.border-cyan-500\/50,
.border-cyan-500\/40,
.border-cyan-500\/30,
.border-cyan-500\/20,
.border-cyan-400,
.border-cyan-400\/50 {
  border-color: rgba(0, 245, 160, 0.35) !important;
}

.bg-cyan-500\/10,
.bg-cyan-500\/15,
.bg-cyan-500\/20,
.bg-cyan-600\/20,
.bg-cyan-950\/40,
.bg-cyan-950\/60,
.bg-cyan-950\/70,
.bg-cyan-950\/80 {
  background-color: rgba(0, 245, 160, 0.08) !important;
}

.shadow-cyan-500\/20,
.shadow-cyan-500\/25,
.shadow-cyan-500\/30 {
  --tw-shadow-color: rgba(0, 245, 160, 0.25) !important;
}

/* Solar Amber Accents */
.text-amber-400, .text-amber-300, .text-amber-200 {
  color: var(--solar-amber) !important;
}

.border-amber-500,
.border-amber-500\/60,
.border-amber-500\/50,
.border-amber-500\/40,
.border-amber-500\/30,
.border-amber-400 {
  border-color: rgba(255, 184, 0, 0.35) !important;
}

.bg-amber-500\/10,
.bg-amber-500\/15,
.bg-amber-500\/20,
.bg-amber-950\/40,
.bg-amber-950\/60 {
  background-color: rgba(255, 184, 0, 0.08) !important;
}

.fill-amber-400 {
  fill: var(--solar-amber) !important;
}

/* Signal Crimson Accents */
.text-rose-500, .text-rose-400, .text-rose-300,
.text-red-500, .text-red-400, .text-red-300 {
  color: var(--signal-crimson) !important;
}

.border-rose-500,
.border-rose-500\/60,
.border-rose-500\/50,
.border-rose-500\/40,
.border-rose-500\/30,
.border-red-500\/40 {
  border-color: rgba(255, 59, 105, 0.35) !important;
}

.bg-rose-500\/10,
.bg-rose-500\/20,
.bg-rose-500\/25,
.bg-red-500\/20,
.bg-rose-950\/40,
.bg-rose-950\/80 {
  background-color: rgba(255, 59, 105, 0.08) !important;
}

.bg-rose-500, .bg-rose-600 {
  background-color: var(--signal-crimson) !important;
}

/* ====================================================================
   4. TACTICAL BUTTONS & 1-CLICK COPY STYLES
   ==================================================================== */

/* High-Contrast Primary Buttons */
.bg-gradient-to-r.from-cyan-500,
.bg-gradient-to-r.from-cyan-500.via-cyan-400.to-blue-500,
.bg-gradient-to-r.from-cyan-500.to-blue-600 {
  background: linear-gradient(135deg, #00F5A0 0%, #00D084 100%) !important;
  color: #061A12 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px var(--quantum-mint-glow) !important;
}

.bg-gradient-to-r.from-cyan-500:hover,
.bg-gradient-to-r.from-cyan-500.via-cyan-400.to-blue-500:hover,
.bg-gradient-to-r.from-cyan-500.to-blue-600:hover {
  background: linear-gradient(135deg, #26F7AE 0%, #00E692 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 245, 160, 0.4) !important;
}

/* View Mode Active State */
.bg-cyan-500.text-slate-950 {
  background-color: var(--quantum-mint) !important;
  color: #061A12 !important;
  font-weight: 800 !important;
}

/* Copy Button Active/Success Feedback */
.bg-emerald-500.text-slate-950 {
  background-color: #00F5A0 !important;
  color: #061A12 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 16px rgba(0, 245, 160, 0.5) !important;
}

/* ====================================================================
   5. CARDS, HOVER ELEVATIONS & MEDIA
   ==================================================================== */

/* Card Smooth Elevation */
.group.relative.flex.flex-col.rounded-3xl,
.group.relative.flex.flex-col.p-2\.5,
.group.p-3\.5 {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.22s ease,
              box-shadow 0.22s ease !important;
}

.group:hover {
  border-color: rgba(0, 245, 160, 0.4) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 245, 160, 0.15) !important;
}

/* Image Thumbnail Zoom */
.group:hover img {
  transform: scale(1.04) !important;
}

/* Tactical Input Fields */
input[type=text], input[type=search], select {
  background-color: var(--vault-surface-subtle) !important;
  border-color: var(--tactical-border) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body);
}

input[type=text]:focus, select:focus {
  border-color: var(--quantum-mint) !important;
  box-shadow: 0 0 0 2px var(--quantum-mint-glow) !important;
  outline: none !important;
}

/* Brand Text Shimmer */
.bg-gradient-to-r.from-cyan-400.via-sky-300.to-purple-400 {
  background: linear-gradient(90deg, #00F5A0 0%, #38BDF8 50%, #A855F7 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}