@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

@import "tailwindcss";

/* ============================================================
   TAILWIND V4 THEME — tokens that generate utility classes
   ============================================================ */
@theme {
  /* Original palette — retained */
  --color-pink:           #B53082;
  --color-purple:         #381B57;
  --color-orange:         #F2963A;
  --color-teal:           #6DC3BB;
  --color-beige:          #C8B99A;
  --color-navy:           #0E1628;
  --color-void:           #07050F;

  /* New palette */
  --color-green:          #00ed3f;
  --color-amber:          #ff8800;
  --color-amber-light:    #ffa238;
  --color-red:            #cc2200;
  --color-blue:           #4466cc;
  --color-bone:           #E0D5BE;

  /* Neutral dark backgrounds */
  --color-bg:             #050505;
  --color-surface:        #0D0D0D;
  --color-surface-raised: #141414;

  /* Typography */
  --font-mono: 'IBM Plex Mono', 'Space Mono', ui-monospace, 'Courier New', monospace;

  /* Zero radius */
  --radius: 0px;
}

/* ============================================================
   SEMANTIC TOKENS — contextual roles mapped to palette
   ============================================================ */
:root {
  /* Backgrounds — neutral dark, no color tint */
  --background:     #050505;
  --surface:        #0D0D0D;
  --surface-raised: #141414;

  /* Borders */
  --border:        #252525;
  --border-active: #00ed3f;

  /* Text */
  --text-primary:   #00ed3f;
  --text-secondary: #E0D5BE;
  /* SpaceWanderer tweak (v0.1.0): upstream default is #4A4A40 (HSL 60,7%,27%) — too dim for
     secondary text on the near-black background. Brightened to HSL 60,8%,39% (+12pt lightness,
     same warm-gray hue) so muted labels stay readable while remaining clearly muted. */
  --text-muted:     #6B6B5C;
  --text-warning:   #ff8800;
  --text-danger:    #cc2200;

  /* Accent shortcuts */
  --accent-primary:   #00ed3f;
  --accent-secondary: #4466cc;
  --accent-warning:   #ff8800;

  /* Glow — original (kept for backward compat) */
  --glow-teal:   0 0 8px #6DC3BB66, 0 0 20px #6DC3BB33;
  --glow-pink:   0 0 8px #B5308266, 0 0 20px #B5308233;
  --glow-orange: 0 0 8px #F2963A66, 0 0 20px #F2963A33;

  /* Glow — new palette */
  --glow-green:  0 0 8px #00ed3f66, 0 0 20px #00ed3f33;
  --glow-amber:  0 0 8px #ff880066, 0 0 20px #ff880033;
  --glow-red:    0 0 8px #cc220066, 0 0 20px #cc220033;
  --glow-blue:   0 0 8px #4466cc66, 0 0 20px #4466cc33;

  /* Text glow — original (kept) */
  --text-glow-teal:   0 0 6px #6DC3BB99, 0 0 14px #6DC3BB55;
  --text-glow-orange: 0 0 6px #F2963A99, 0 0 14px #F2963A55;
  --text-glow-pink:   0 0 6px #B5308299, 0 0 14px #B5308255;

  /* Text glow — new palette */
  --text-glow-green:  0 0 6px #00ed3f99, 0 0 14px #00ed3f55;
  --text-glow-amber:  0 0 6px #ff880099, 0 0 14px #ff880055;
  --text-glow-red:    0 0 6px #cc220099, 0 0 14px #cc220055;
  --text-glow-blue:   0 0 6px #4466cc99, 0 0 14px #4466cc55;

  /* Corner notch clip-paths */
  --clip-corner-sm: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
  --clip-corner-md: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px);
  --clip-corner-lg: polygon(16px 0%, 100% 0%, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0% 100%, 0% 16px);

  /* Geometry */
  --border-width: 1px;
}

/* ============================================================
   KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes flicker {
  0%, 89%, 91%, 93%, 100% { opacity: 1; }
  90%  { opacity: 0.4; }
  92%  { opacity: 0.8; }
  94%  { opacity: 0.6; }
}

@keyframes blink-cursor {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes glitch {
  0%, 100% { transform: translate(0); }
  10%      { transform: translate(-2px, 1px); }
  20%      { transform: translate(2px, -1px); }
  30%      { transform: translate(-1px, 2px); }
  40%      { transform: translate(1px, -1px); }
  50%      { transform: translate(0); }
}

@keyframes scanline-move {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

@keyframes data-scroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* ============================================================
   BASE RESET
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0 !important;
}

html {
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--background);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  min-height: 100vh;
}

button,
input,
textarea,
select {
  font-family: var(--font-mono);
  font-size: inherit;
  border-radius: 0;
}

a {
  color: var(--text-primary);
  text-decoration: none;
}

a:hover {
  text-shadow: var(--text-glow-green);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin: 0;
}

p {
  margin: 0;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: var(--background);
}
::-webkit-scrollbar-thumb {
  background: var(--border);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-active);
  box-shadow: var(--glow-green);
}

/* Text selection */
::selection {
  background: #00ed3f;
  color: #050505;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

/* CRT scanline overlay — apply to panels/containers */
.scanlines {
  position: relative;
  overflow: hidden;
}
.scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.12) 3px,
    rgba(0, 0, 0, 0.12) 4px
  );
  pointer-events: none;
  z-index: 10;
}

/* Phosphor flicker text */
.flicker {
  animation: flicker 8s infinite;
}

/* Glitch on hover */
.glitch-hover:hover {
  animation: glitch 0.3s ease-in-out;
}

/* Pulsing glow */
.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Corner notch variants */
.clip-corner-sm {
  clip-path: var(--clip-corner-sm);
}
.clip-corner-md {
  clip-path: var(--clip-corner-md);
}
.clip-corner-lg {
  clip-path: var(--clip-corner-lg);
}

/* ============================================================
   THEME: STAR WARS
   Holographic blue primary · bone/gold warnings · teal info
   Deep blue-black backgrounds
   ============================================================ */
[data-theme="star-wars"] {
  /* Remap color primitives used by components */
  --color-green:  #1a6dff;   /* blue hologram = "active" */
  --color-amber:  #E0D5BE;   /* bone/gold = "warning" */
  --color-red:    #cc0000;   /* Sith red = "danger" */
  --color-blue:   #6DC3BB;   /* teal = "info" */

  /* Backgrounds — deep blue-black */
  --background:     #020509;
  --surface:        #060E18;
  --surface-raised: #0C1826;

  /* Borders */
  --border:        #152030;
  --border-active: #1a6dff;

  /* Text */
  --text-primary:   #1a6dff;
  --text-secondary: #E0D5BE;
  --text-muted:     #2A3A52;
  --text-warning:   #E0D5BE;
  --text-danger:    #cc0000;

  /* Accent shortcuts */
  --accent-primary:   #1a6dff;
  --accent-secondary: #6DC3BB;
  --accent-warning:   #E0D5BE;

  /* Glow — remap green→blue, amber→bone, blue→teal */
  --glow-green:  0 0 8px rgba(26,109,255,0.40),  0 0 20px rgba(26,109,255,0.20);
  --glow-amber:  0 0 8px rgba(224,213,190,0.35), 0 0 20px rgba(224,213,190,0.15);
  --glow-red:    0 0 8px rgba(204,0,0,0.40),     0 0 20px rgba(204,0,0,0.20);
  --glow-blue:   0 0 8px rgba(109,195,187,0.40), 0 0 20px rgba(109,195,187,0.20);

  /* Text glow — remap */
  --text-glow-green:  0 0 6px rgba(26,109,255,0.60),  0 0 14px rgba(26,109,255,0.30);
  --text-glow-amber:  0 0 6px rgba(224,213,190,0.55), 0 0 14px rgba(224,213,190,0.25);
  --text-glow-red:    0 0 6px rgba(204,0,0,0.60),     0 0 14px rgba(204,0,0,0.30);
  --text-glow-blue:   0 0 6px rgba(109,195,187,0.60), 0 0 14px rgba(109,195,187,0.30);
}

[data-theme="star-wars"] ::selection {
  background: #1a6dff;
  color: #020509;
}

/* ============================================================
   THEME: ALIEN
   Bone/ivory primary · amber warnings · acid green info
   Warm organic dark backgrounds
   ============================================================ */
[data-theme="alien"] {
  /* Remap color primitives used by components */
  --color-green:  #E0D5BE;   /* bone = "active" (bleached, eerie) */
  --color-amber:  #ff8800;   /* amber = "warning" (Nostromo lights) */
  --color-red:    #cc2200;   /* blood red = "danger" */
  --color-blue:   #00ed3f;   /* acid green = "info" (bioluminescent) */

  /* Backgrounds — warm organic dark */
  --background:     #040302;
  --surface:        #080604;
  --surface-raised: #0E0A06;

  /* Borders */
  --border:        #201808;
  --border-active: #E0D5BE;

  /* Text */
  --text-primary:   #E0D5BE;
  --text-secondary: #C8B99A;
  --text-muted:     #403020;
  --text-warning:   #ff8800;
  --text-danger:    #cc2200;

  /* Accent shortcuts */
  --accent-primary:   #E0D5BE;
  --accent-secondary: #00ed3f;
  --accent-warning:   #ff8800;

  /* Glow — remap green→bone, blue→acid-green */
  --glow-green:  0 0 8px rgba(224,213,190,0.35), 0 0 20px rgba(224,213,190,0.15);
  --glow-amber:  0 0 8px rgba(255,136,0,0.40),   0 0 20px rgba(255,136,0,0.20);
  --glow-red:    0 0 8px rgba(204,34,0,0.40),    0 0 20px rgba(204,34,0,0.20);
  --glow-blue:   0 0 8px rgba(0,237,63,0.40),    0 0 20px rgba(0,237,63,0.20);

  /* Text glow — remap */
  --text-glow-green:  0 0 6px rgba(224,213,190,0.55), 0 0 14px rgba(224,213,190,0.25);
  --text-glow-amber:  0 0 6px rgba(255,136,0,0.60),   0 0 14px rgba(255,136,0,0.30);
  --text-glow-red:    0 0 6px rgba(204,34,0,0.60),    0 0 14px rgba(204,34,0,0.30);
  --text-glow-blue:   0 0 6px rgba(0,237,63,0.60),    0 0 14px rgba(0,237,63,0.30);
}

[data-theme="alien"] ::selection {
  background: #E0D5BE;
  color: #040302;
}