/* ==========================================================================
   8Bit Audio - Aurora DAW | Teenage Engineering Inspired Design System
   Aesthetic: Scandinavian Minimalist Industrial, Chalk/Off-White Base,
              High-Contrast Black Typography, Utilitarian Bright Accents,
              Tactile Mechanical Keys, Precision Hairline Grid Architecture.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&family=Montserrat:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap');

:root {
  /* ==========================================================================
     Studio Sand & Obsidian Palette (Exact to Attached Mockups)
     ========================================================================== */
  --text: #0a0b0d;                     /* Deep stark black for headlines and body */
  --background: #eae6df;               /* Warm Studio Sand / Cream base background */
  --primary: #121418;                  /* Obsidian Hardware Black */
  --secondary: #64748b;                /* Technical Studio Slate */
  --accent: #27272a;                   /* Dark Grey accents */

  /* Studio Hardware Surfaces */
  --te-white: #ffffff;
  --te-cream: #eae6df;                 /* Signature Mockup Studio Sand / Cream */
  --te-cream-light: #f4f1ea;           /* Elevated cream surface */
  --te-cream-dark: #ded9d0;            /* Inset cream well / border tone */
  --te-card-obsidian: #0f1217;         /* Deep Obsidian Black for 3D Cards */
  --te-card-surface: #14171f;          /* Card inner elevated panel */
  --te-chalk: var(--background);       /* Primary background: #eae6df */
  --te-bone: #f4f1ea;
  --te-sand: #ded9d0;
  --te-black: #0a0b0d;
  --te-dark-panel: #0f1217;
  --te-dark-inset: #090a0d;

  /* Backward Compatibility Mappings */
  --bg-black: var(--te-chalk);
  --bg-studio-deep: var(--te-cream);
  --bg-studio-card: var(--te-card-obsidian);
  --bg-studio-elevated: var(--te-card-surface);
  --bg-glass-active: rgba(0, 0, 0, 0.06);
  --bg-glass-input: #ffffff;

  /* Category Mood Colors (Exact to Mockups) */
  --mood-warm: #f59e0b;                /* 01 Warm / Lo-Fi Drums */
  --mood-bright: #38bdf8;              /* 04 Bright / Concert Grand */
  --mood-aggressive: #ef4444;          /* 02 Aggressive / Analog Rhythm */
  --mood-sad: #3b82f6;                 /* Sad / Melancholic */
  --mood-chill: #10b981;               /* 03 Chill / Tape Melt */
  --mood-dark: #a855f7;                /* 05 Dark / Ambient Textures */

  /* Brand Accents */
  --te-blue: #0284c7;
  --te-cyan: #38bdf8;
  --te-orange: #0a0b0d;                /* Sleek black pill button */
  --te-orange-hover: #1e2129;
  --te-yellow: #f59e0b;
  --te-green: #10b981;
  --te-red: #ef4444;

  /* Hairline Borders on Cream Base */
  --border-te-subtle: rgba(0, 0, 0, 0.08);
  --border-te-light: rgba(0, 0, 0, 0.12);
  --border-te-mid: rgba(0, 0, 0, 0.2);
  --border-te-strong: rgba(0, 0, 0, 0.35);
  --border-card: rgba(255, 255, 255, 0.08);

  /* Legacy Border Mappings */
  --border-glass-subtle: var(--border-te-subtle);
  --border-glass-light: var(--border-te-light);
  --border-glass-cyan: rgba(56, 189, 248, 0.4);
  --border-glass-purple: rgba(168, 85, 247, 0.4);

  /* Typography Standards */
  --font-gotham: "Montserrat", "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* Text Colors */
  --text-primary: #0a0b0d;             /* Stark Black on Cream */
  --text-secondary: #57534e;           /* Studio Warm Slate */
  --text-muted: #78716c;               /* Technical Muted Label */
  --text-dim: #a8a29e;                 /* Fine Annotations */
  --text-on-dark: #f8fafc;             /* Crisp White on Obsidian Cards */
  --text-muted-dark: #94a3b8;          /* Slate on Obsidian Cards */

  /* Shadows */
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-elevated: 0 20px 40px -15px rgba(0, 0, 0, 0.15);
  --shadow-card-3d: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  --shadow-card-active: 0 20px 50px -10px rgba(56, 189, 248, 0.35), 0 10px 30px rgba(0, 0, 0, 0.4);
  --shadow-button: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-button-pressed: inset 0 1px 2px rgba(0, 0, 0, 0.2);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Transition timings */
  --ease-te: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: var(--ease-te);
  --transition-fast: 0.15s var(--ease-te);
  --transition-normal: 0.25s var(--ease-te);
  --transition-slow: 0.4s var(--ease-te);
}

/* ==========================================================================
   CSS Reset & Base Setup
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  color-scheme: light;
  font-size: 16px;
  background-color: var(--te-chalk);
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background-color: var(--te-chalk);
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  touch-action: manipulation;
}

/* Fluid Responsive Media Defaults - Prevents overflow on mobile viewports */
img, picture, video, canvas {
  max-width: 100%;
  height: auto;
}

/* Custom Minimalist Scandinavian Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--te-chalk);
  border-left: 1px solid var(--border-te-light);
}
::-webkit-scrollbar-thumb {
  background: #c8c3b9;
  border-radius: var(--radius-full);
  border: 1px solid var(--te-chalk);
}
::-webkit-scrollbar-thumb:hover {
  background: #a8a29e;
}

/* Selection Color - High Contrast Inverted */
::selection {
  background: #0a0b0d;
  color: #eae6df;
}

/* ==========================================================================
   Scandinavian Modular Surface Texture & Grid Overlay
   ========================================================================== */
.studio-ambient-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background-color: var(--te-chalk);
}

/* Precision Hairline Modular Grid Overlay */
.studio-grid-overlay {
  position: fixed;
  inset: 0;
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.035) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 1;
}

/* Subtle Matte Powder-Coat Noise */
.noise-texture {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.022'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 2;
  opacity: 0.35;
}

/* Hide legacy glowing neon orbs */
.aurora-light-orb,
.orb-cyan,
.orb-purple,
.orb-magenta {
  display: none !important;
}

/* ==========================================================================
   Typography Standards
   ========================================================================== */
.font-gotham {
  font-family: var(--font-gotham);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-gotham);
  font-weight: 850;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  line-height: 1.1;
  text-transform: uppercase;
  overflow-wrap: break-word;
  word-break: break-word;
}

.gotham-display {
  font-family: var(--font-gotham);
  font-size: clamp(2.2rem, 6.5vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.96;
  text-transform: uppercase;
  color: var(--text-primary);
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Dual Typography Utilities: Bold Solid + Outlined Wireframe */
.text-display-solid {
  font-family: var(--font-gotham);
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.text-display-wireframe {
  font-family: var(--font-gotham);
  font-weight: 900;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: transparent !important;
  -webkit-text-stroke: 1.5px currentColor;
  text-stroke: 1.5px currentColor;
}

.gotham-subtitle {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
}

/* Technical Monospace Badge (DIN / ISO Style) */
.studio-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  background: var(--te-white);
  border: 1px solid var(--border-te-mid);
  border-radius: var(--radius-full);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  max-width: 100%;
  flex-wrap: wrap;
  line-height: 1.4;
}

.studio-badge .badge-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--te-orange);
}

/* High Contrast Header Text Accent */
.text-gradient-aurora {
  color: var(--text-primary);
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
}

.text-gradient-cyan {
  color: var(--te-cyan);
  background: none;
  -webkit-text-fill-color: initial;
}

.text-gradient-purple {
  color: #6d28d9;
  background: none;
  -webkit-text-fill-color: initial;
}

/* ==========================================================================
   Modular Scandinavian Panels & Cards (Thin Hairline Borders)
   ========================================================================== */
.glass-panel {
  background: var(--te-white);
  border: 1px solid var(--border-te-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.glass-panel::before {
  /* Subtle top specular hairline */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.glass-panel:hover {
  border-color: var(--te-black);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.glow-border {
  position: relative;
  border: 1px solid var(--border-te-mid);
}

/* ==========================================================================
   Tactile Mechanical Buttons (Keycaps with Hard Offset Drop)
   ========================================================================== */
.btn-aurora {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.75rem 1.6rem;
  min-height: 44px;
  font-family: var(--font-gotham);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--te-orange);
  border: 1px solid var(--te-black);
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--shadow-button);
  transition: all var(--transition-fast);
  text-decoration: none;
  position: relative;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.btn-aurora:hover {
  background: var(--te-orange-hover);
  transform: translateY(-1px);
  box-shadow: 0 3px 0 var(--te-black);
}

.btn-aurora:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--te-black);
}

.btn-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.75rem 1.5rem;
  min-height: 44px;
  font-family: var(--font-gotham);
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: var(--te-white);
  border: 1px solid var(--te-black);
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--shadow-button);
  transition: all var(--transition-fast);
  text-decoration: none;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.btn-glass:hover {
  background: var(--te-chalk);
  transform: translateY(-1px);
  box-shadow: 0 3px 0 var(--te-black);
}

.btn-glass:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--te-black);
}

/* ==========================================================================
   Teenage Engineering Visual Micro-Elements
   ========================================================================== */
/* Technical Crosshair (+) */
.te-crosshair {
  position: absolute;
  width: 9px;
  height: 9px;
  pointer-events: none;
  color: var(--border-te-mid);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 9px;
  text-align: center;
}
.te-crosshair-tl { top: -5px; left: -5px; }
.te-crosshair-tr { top: -5px; right: -5px; }
.te-crosshair-bl { bottom: -5px; left: -5px; }
.te-crosshair-br { bottom: -5px; right: -5px; }

/* Engineering Label Pill */
.te-label-spec {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* LED Indicator Pip */
.te-led {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.te-led-green { background: var(--te-green); }
.te-led-orange { background: var(--te-orange); }
.te-led-yellow { background: var(--te-yellow); }
.te-led-red { background: var(--te-red); }

/* Inverted Dark LCD Hardware Screen Block */
.te-hardware-screen {
  background: var(--te-charcoal);
  border: 1px solid var(--te-black);
  border-radius: var(--radius-md);
  color: #f4f4f0;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Animations */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
}

@keyframes equalizerBar {
  0%, 100% { height: 20%; }
  50% { height: 95%; }
}