@import url("https://fonts.googleapis.com/css2?family=Electrolize&family=Orbitron:wght@400;600;700;900&family=Share+Tech+Mono&family=Source+Code+Pro:wght@300;400;500;600&family=VT323&family=Press+Start+2P&family=Merriweather:wght@400;700&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── AeThex Cyberpunk Theme — copied verbatim from AeThex-Passport-Engine/client/src/index.css ── */
:root {
  --button-outline: rgba(0, 255, 255, .15);
  --badge-outline: rgba(0, 255, 255, .08);
  --opaque-button-border-intensity: 8;
  --elevate-1: rgba(0, 255, 255, .04);
  --elevate-2: rgba(0, 255, 255, .08);
  --background: 0 0% 2%;
  --foreground: 0 0% 95%;
  --border: 180 100% 50% / 0.2;
  --card: 0 0% 5%;
  --card-foreground: 0 0% 95%;
  --card-border: 180 100% 50% / 0.15;
  --sidebar: 0 0% 4%;
  --sidebar-foreground: 0 0% 90%;
  --sidebar-border: 180 100% 50% / 0.15;
  --sidebar-primary: 180 100% 50%;
  --sidebar-primary-foreground: 0 0% 0%;
  --sidebar-accent: 0 0% 8%;
  --sidebar-accent-foreground: 0 0% 90%;
  --sidebar-ring: 180 100% 50%;
  --popover: 0 0% 5%;
  --popover-foreground: 0 0% 95%;
  --popover-border: 180 100% 50% / 0.2;
  --primary: 180 100% 50%;
  --primary-foreground: 0 0% 0%;
  --secondary: 0 0% 10%;
  --secondary-foreground: 0 0% 85%;
  --muted: 0 0% 8%;
  --muted-foreground: 0 0% 55%;
  --accent: 195 100% 45%;
  --accent-foreground: 0 0% 0%;
  --destructive: 340 100% 50%;
  --destructive-foreground: 0 0% 98%;
  --input: 0 0% 12%;
  --ring: 180 100% 50%;
  --chart-1: 180 100% 50%;
  --chart-2: 300 100% 50%;
  --chart-3: 142 76% 45%;
  --chart-4: 340 100% 50%;
  --chart-5: 260 100% 65%;
  --neon-purple: 270 100% 65%;
  --neon-magenta: 300 100% 55%;
  --neon-cyan: 180 100% 50%;
  --gameforge-green: 142 76% 45%;
  --gameforge-dark: 142 30% 6%;
  --font-sans: 'Electrolize', 'Source Code Pro', monospace;
  --font-serif: Georgia, serif;
  --font-mono: 'Source Code Pro', 'JetBrains Mono', monospace;
  --font-display: 'Electrolize', monospace;
  --font-pixel: Oxanium, sans-serif;
  --radius: 0rem;
  --shadow-2xs: 0px 2px 0px 0px hsl(0 0% 0% / 0.00);
  --shadow-xs: 0px 2px 0px 0px hsl(0 0% 0% / 0.00);
  --shadow-sm: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00);
  --shadow: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00);
  --shadow-md: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 2px 4px -1px hsl(0 0% 0% / 0.00);
  --shadow-lg: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 4px 6px -1px hsl(0 0% 0% / 0.00);
  --shadow-xl: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 8px 10px -1px hsl(0 0% 0% / 0.00);
  --shadow-2xl: 0px 2px 0px 0px hsl(0 0% 0% / 0.00);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* AeThex Brand Colors — cyan palette */
  --aethex-50: 180 100% 97%;
  --aethex-100: 180 100% 92%;
  --aethex-200: 180 100% 80%;
  --aethex-300: 180 100% 70%;
  --aethex-400: 180 100% 60%;
  --aethex-500: 180 100% 50%;
  --aethex-600: 180 100% 40%;
  --aethex-700: 180 100% 30%;
  --aethex-800: 180 100% 20%;
  --aethex-900: 180 100% 12%;
  --aethex-950: 180 100% 6%;

  /* Neon accent palette */
  --neon-green: 142 76% 45%;
  --neon-yellow: 50 100% 65%;

  /* Spacing tokens */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-section-y: var(--space-6);

  /* Fallback for older browsers */
  --sidebar-primary-border: hsl(var(--sidebar-primary));
  --sidebar-primary-border: hsl(from hsl(var(--sidebar-primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --sidebar-accent-border: hsl(var(--sidebar-accent));
  --sidebar-accent-border: hsl(from hsl(var(--sidebar-accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --primary-border: hsl(var(--primary));
  --primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --secondary-border: hsl(var(--secondary));
  --secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --muted-border: hsl(var(--muted));
  --muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --accent-border: hsl(var(--accent));
  --accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --destructive-border: hsl(var(--destructive));
  --destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
}

.dark {
  --button-outline: rgba(0, 255, 255, .15);
  --badge-outline: rgba(0, 255, 255, .08);
  --opaque-button-border-intensity: 8;
  --elevate-1: rgba(0, 255, 255, .04);
  --elevate-2: rgba(0, 255, 255, .08);
  --background: 0 0% 2%;
  --foreground: 0 0% 95%;
  --border: 180 100% 50% / 0.2;
  --card: 0 0% 5%;
  --card-foreground: 0 0% 95%;
  --card-border: 180 100% 50% / 0.15;
  --sidebar: 0 0% 4%;
  --sidebar-foreground: 0 0% 90%;
  --sidebar-border: 180 100% 50% / 0.15;
  --sidebar-primary: 180 100% 50%;
  --sidebar-primary-foreground: 0 0% 0%;
  --sidebar-accent: 0 0% 8%;
  --sidebar-accent-foreground: 0 0% 90%;
  --sidebar-ring: 180 100% 50%;
  --popover: 0 0% 5%;
  --popover-foreground: 0 0% 95%;
  --popover-border: 180 100% 50% / 0.2;
  --primary: 180 100% 50%;
  --primary-foreground: 0 0% 0%;
  --secondary: 0 0% 10%;
  --secondary-foreground: 0 0% 85%;
  --muted: 0 0% 8%;
  --muted-foreground: 0 0% 55%;
  --accent: 195 100% 45%;
  --accent-foreground: 0 0% 0%;
  --destructive: 340 100% 50%;
  --destructive-foreground: 0 0% 98%;
  --input: 0 0% 12%;
  --ring: 180 100% 50%;
  --chart-1: 180 100% 50%;
  --chart-2: 300 100% 50%;
  --chart-3: 142 76% 45%;
  --chart-4: 340 100% 50%;
  --chart-5: 260 100% 65%;
  --neon-purple: 270 100% 65%;
  --neon-magenta: 300 100% 55%;
  --neon-cyan: 180 100% 50%;
  --gameforge-green: 142 76% 45%;
  --gameforge-dark: 142 30% 6%;
  --shadow-2xs: 0px 2px 0px 0px hsl(0 0% 0% / 0.00);
  --shadow-xs: 0px 2px 0px 0px hsl(0 0% 0% / 0.00);
  --shadow-sm: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00);
  --shadow: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00);
  --shadow-md: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 2px 4px -1px hsl(0 0% 0% / 0.00);
  --shadow-lg: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 4px 6px -1px hsl(0 0% 0% / 0.00);
  --shadow-xl: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 8px 10px -1px hsl(0 0% 0% / 0.00);
  --shadow-2xl: 0px 2px 0px 0px hsl(0 0% 0% / 0.00);

  --sidebar-primary-border: hsl(var(--sidebar-primary));
  --sidebar-primary-border: hsl(from hsl(var(--sidebar-primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --sidebar-accent-border: hsl(var(--sidebar-accent));
  --sidebar-accent-border: hsl(from hsl(var(--sidebar-accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --primary-border: hsl(var(--primary));
  --primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --secondary-border: hsl(var(--secondary));
  --secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --muted-border: hsl(var(--muted));
  --muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --accent-border: hsl(var(--accent));
  --accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --destructive-border: hsl(var(--destructive));
  --destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply font-sans antialiased bg-background text-foreground;
  }

  /* Scanline overlay — from AeThex-Passport-Engine */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      rgba(0, 255, 255, 0.015) 1px,
      rgba(0, 255, 255, 0.015) 2px
    );
    pointer-events: none;
    z-index: 9999;
  }

  /* Grid background — from AeThex-Passport-Engine */
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
      linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: -1;
  }

  html {
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  html::-webkit-scrollbar { display: none; }
  *::-webkit-scrollbar { display: none; }
  * { scrollbar-width: none; }

  .container {
    @apply px-4 sm:px-6 lg:px-8;
  }
}

/* ── Elevation system — from AeThex-Passport-Engine ── */
@layer utilities {
  input[type="search"]::-webkit-search-cancel-button {
    @apply hidden;
  }

  [contenteditable][data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: hsl(var(--muted-foreground));
    pointer-events: none;
  }

  .no-default-hover-elevate {}
  .no-default-active-elevate {}

  .toggle-elevate::before,
  .toggle-elevate-2::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0px;
    border-radius: inherit;
    z-index: -1;
  }

  .toggle-elevate.toggle-elevated::before {
    background-color: var(--elevate-2);
  }

  .border.toggle-elevate::before { inset: -1px; }

  .hover-elevate:not(.no-default-hover-elevate),
  .active-elevate:not(.no-default-active-elevate),
  .hover-elevate-2:not(.no-default-hover-elevate),
  .active-elevate-2:not(.no-default-active-elevate) {
    position: relative;
    z-index: 0;
  }

  .hover-elevate:not(.no-default-hover-elevate)::after,
  .active-elevate:not(.no-default-active-elevate)::after,
  .hover-elevate-2:not(.no-default-hover-elevate)::after,
  .active-elevate-2:not(.no-default-active-elevate)::after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0px;
    border-radius: inherit;
    z-index: 999;
  }

  .hover-elevate:hover:not(.no-default-hover-elevate)::after,
  .active-elevate:active:not(.no-default-active-elevate)::after {
    background-color: var(--elevate-1);
  }

  .hover-elevate-2:hover:not(.no-default-hover-elevate)::after,
  .active-elevate-2:active:not(.no-default-active-elevate)::after {
    background-color: var(--elevate-2);
  }

  .border.hover-elevate:not(.no-hover-interaction-elevate)::after,
  .border.active-elevate:not(.no-active-interaction-elevate)::after,
  .border.hover-elevate-2:not(.no-hover-interaction-elevate)::after,
  .border.active-elevate-2:not(.no-active-interaction-elevate)::after {
    inset: -1px;
  }
}

/* ── AeThex OS brand utilities ── */
@layer utilities {
  .ax-orbitron { font-family: "Orbitron", monospace !important; }
  .ax-mono     { font-family: "Share Tech Mono", monospace !important; }
  .ax-electrolize { font-family: "Electrolize", monospace !important; }

  .ax-corner-bracket { position: relative; }
  .ax-corner-bracket::before,
  .ax-corner-bracket::after {
    content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  }
  .ax-corner-bracket::before {
    top: -1px; left: -1px;
    border-top: 1px solid rgba(0,255,255,0.5);
    border-left: 1px solid rgba(0,255,255,0.5);
  }
  .ax-corner-bracket::after {
    bottom: -1px; right: -1px;
    border-bottom: 1px solid rgba(0,255,255,0.5);
    border-right: 1px solid rgba(0,255,255,0.5);
  }

  .ax-card-sweep { position: relative; overflow: hidden; }
  .ax-card-sweep::after {
    content: ""; position: absolute; top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,255,255,0.04), transparent);
    animation: ax-sweep 6s infinite; pointer-events: none;
  }

  .ax-clip {
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  }

  .ax-vignette::after {
    content: ""; position: fixed; inset: 0;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%);
    pointer-events: none; z-index: 9989;
  }

  /* ── Arm wallpaper patterns ── */
  .wallpaper-labs {
    background-image: radial-gradient(circle, rgba(251,191,36,0.08) 1px, transparent 1px);
    background-size: 20px 20px;
    background-attachment: fixed;
  }
  .wallpaper-gameforge {
    background-image:
      linear-gradient(45deg, rgba(34,197,94,0.06) 25%, transparent 25%, transparent 75%, rgba(34,197,94,0.06) 75%),
      linear-gradient(45deg, rgba(34,197,94,0.06) 25%, transparent 25%, transparent 75%, rgba(34,197,94,0.06) 75%);
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
    background-attachment: fixed;
  }
  .wallpaper-corp {
    background-image:
      linear-gradient(90deg, rgba(59,130,246,0.05) 1px, transparent 1px),
      linear-gradient(rgba(59,130,246,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    background-attachment: fixed;
  }
  .wallpaper-foundation {
    background-image: repeating-linear-gradient(0deg, rgba(239,68,68,0.04) 0px, rgba(239,68,68,0.04) 1px, transparent 1px, transparent 2px);
    background-attachment: fixed;
  }
  .wallpaper-devlink {
    background-image:
      linear-gradient(0deg, transparent 24%, rgba(6,182,212,0.08) 25%, rgba(6,182,212,0.08) 26%, transparent 27%, transparent 74%, rgba(6,182,212,0.08) 75%, rgba(6,182,212,0.08) 76%, transparent 77%),
      linear-gradient(90deg, transparent 24%, rgba(6,182,212,0.08) 25%, rgba(6,182,212,0.08) 26%, transparent 27%, transparent 74%, rgba(6,182,212,0.08) 75%, rgba(6,182,212,0.08) 76%, transparent 77%);
    background-size: 50px 50px;
    background-attachment: fixed;
  }
  .wallpaper-staff {
    background-image: radial-gradient(circle, rgba(168,85,247,0.08) 1px, transparent 1px);
    background-size: 20px 20px;
    background-attachment: fixed;
  }
  .wallpaper-nexus {
    background-image:
      linear-gradient(45deg, rgba(236,72,153,0.06) 25%, transparent 25%, transparent 75%, rgba(236,72,153,0.06) 75%),
      linear-gradient(45deg, rgba(236,72,153,0.06) 25%, transparent 25%, transparent 75%, rgba(236,72,153,0.06) 75%);
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
    background-attachment: fixed;
  }
  .wallpaper-default {
    background-image: linear-gradient(135deg, rgba(0,255,255,0.03) 0%, rgba(0,255,255,0.01) 100%);
  }

  /* ── Font aliases (arm theming) ── */
  .font-labs      { font-family: "VT323", "Courier New", monospace; letter-spacing: 0.05em; }
  .font-gameforge { font-family: "Press Start 2P", "Arial Black", sans-serif; letter-spacing: 0.1em; font-size: 0.875em; }
  .font-corp      { font-family: "Electrolize", "Source Code Pro", monospace; font-weight: 600; }
  .font-foundation { font-family: "Merriweather", "Georgia", serif; font-weight: 700; letter-spacing: -0.02em; }
  .font-devlink   { font-family: "Source Code Pro", "Electrolize", monospace; font-weight: 400; letter-spacing: 0.02em; }
  .font-staff     { font-family: "Electrolize", "Source Code Pro", monospace; font-weight: 600; }
  .font-nexus     { font-family: "Electrolize", "Source Code Pro", monospace; font-weight: 600; }
  .font-default   { font-family: "Electrolize", "Source Code Pro", monospace; }

  /* ── Text gradients ── */
  .text-gradient {
    @apply bg-gradient-to-r from-aethex-300 via-aethex-500 to-neon-purple bg-clip-text text-transparent;
  }
  .text-gradient-purple {
    @apply bg-gradient-to-r from-neon-purple via-aethex-500 to-aethex-300 bg-clip-text text-transparent;
  }
  .bg-aethex-gradient {
    @apply bg-gradient-to-br from-aethex-900 via-background to-aethex-800;
  }

  /* ── Interaction ── */
  .hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .hover-lift:hover { transform: translateY(-4px); }
  .hover-glow { transition: all 0.3s ease; }
  .hover-glow:hover { filter: brightness(1.1) drop-shadow(0 0 8px rgba(0,255,255,0.4)); }
  .interactive-scale { transition: transform 0.2s ease; }
  .interactive-scale:hover { transform: scale(1.03); }
  .interactive-scale:active { transform: scale(0.98); }

  /* ── Spacing helpers ── */
  .section-cozy { padding-block: var(--space-section-y); }
  .gap-cozy { gap: var(--space-5); }
  .pad-cozy { padding: var(--space-5); }

  /* ── Animations ── */
  .animate-fade-in { animation: fade-in 0.6s ease-out; }
  .animate-slide-up { animation: slide-up 0.6s ease-out; }
  .animate-slide-down { animation: slide-down 0.6s ease-out; }
  .animate-slide-left { animation: slide-left 0.6s ease-out; }
  .animate-slide-right { animation: slide-right 0.6s ease-out; }
  .animate-scale-in { animation: scale-in 0.4s ease-out; }
  .animate-typing {
    animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
    overflow: hidden;
    border-right: 3px solid;
    white-space: nowrap;
    margin: 0 auto;
  }

  .skeleton {
    background: linear-gradient(90deg, transparent, rgba(0,255,255,0.06), transparent);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
  }
}

/* ── Keyframes ── */
@keyframes ax-sweep { 0%{left:-100%} 100%{left:200%} }
@keyframes ax-blink { 0%,50%{opacity:1} 51%,100%{opacity:0} }
@keyframes fade-in { from{opacity:0} to{opacity:1} }
@keyframes slide-up { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes slide-down { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes slide-left { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
@keyframes slide-right { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }
@keyframes scale-in { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }
@keyframes typing { from{width:0} to{width:100%} }
@keyframes blink-caret { from,to{border-color:transparent} 50%{border-color:currentColor} }
@keyframes skeleton-loading { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}