/* ==========================================================================
   INTERNODE ARCADE HUB - DESIGN SYSTEM & THEME TOKENS
   Matte Charcoal & Industrial Safety Orange (Strictly 0-Dependency)
   ========================================================================== */

:root {
  color-scheme: dark;
  /* Color Palette - Tokyo Night Dark (Default) */
  --bg-primary: #0f1117;
  --bg-secondary: #161822;
  --bg-tertiary: #1a1d2b;
  --bg-surface: #161822;
  --bg-surface-elevated: #1a1d2b;
  --bg-surface-hover: #24283b;
  --bg-surface-active: #2f344d;
  --bg-drawer: #13141c;
  --bg-glass: rgba(22, 24, 34, 0.85);
  --bg-glass-heavy: rgba(15, 17, 23, 0.94);

  /* Hairline & Structural Borders */
  --border-subtle: rgba(122, 162, 247, 0.12);
  --border-medium: rgba(122, 162, 247, 0.22);
  --border-highlight: rgba(122, 162, 247, 0.40);
  --border-color: rgba(122, 162, 247, 0.15);
  
  /* Primary Functional Accent - Tokyo Azure / Violet Glow */
  --accent: #7aa2f7;
  --accent-glow: rgba(122, 162, 247, 0.35);
  --accent-orange: #7aa2f7;
  --accent-orange-hover: #89b4fa;
  --accent-orange-active: #6366f1;
  --accent-orange-dim: rgba(122, 162, 247, 0.15);
  --accent-orange-border: rgba(122, 162, 247, 0.45);
  --accent-orange-solid-text: #0f1117;

  /* Secondary Status Accents */
  --status-ok: #22c55e;
  --status-warn: #f59e0b;
  --status-err: #ef4444;

  /* Typography */
  --text-primary: #c0caf5;
  --text-secondary: #7982a9;
  --text-muted: #565f89;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Layout Measurements */
  --header-height: 50px;
  --footer-height: 50px;
  --drawer-width: 380px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --glass-blur: 16px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   STUDIO THEME PRESETS (OKLCH / HSL Token Palettes)
   ========================================================================== */

/* 0. Tokyo Night Dark (Default) */
:root[data-theme="default"],
:root[data-theme="tokyo-night"] {
  --bg-primary: #0f1117;
  --bg-secondary: #161822;
  --bg-tertiary: #1a1d2b;
  --bg-surface: #161822;
  --bg-surface-elevated: #1a1d2b;
  --bg-surface-hover: #24283b;
  --bg-surface-active: #2f344d;
  --bg-drawer: #13141c;
  --bg-glass: rgba(22, 24, 34, 0.85);
  --bg-glass-heavy: rgba(15, 17, 23, 0.94);
  --border-subtle: rgba(122, 162, 247, 0.12);
  --border-medium: rgba(122, 162, 247, 0.22);
  --border-highlight: rgba(122, 162, 247, 0.40);
  --border-color: rgba(122, 162, 247, 0.15);
  --accent: #7aa2f7;
  --accent-glow: rgba(122, 162, 247, 0.35);
  --accent-orange: #7aa2f7;
  --accent-orange-hover: #89b4fa;
  --accent-orange-active: #6366f1;
  --accent-orange-dim: rgba(122, 162, 247, 0.15);
  --accent-orange-border: rgba(122, 162, 247, 0.45);
  --accent-orange-solid-text: #0f1117;
  --text-primary: #c0caf5;
  --text-secondary: #7982a9;
  --text-muted: #565f89;
}

/* 1. Industrial Safety Orange */
:root[data-theme="obsidian-orange"],
:root[data-theme="safety-orange-industrial"] {
  --bg-primary: #0c0e12;
  --bg-secondary: #14171e;
  --bg-tertiary: #1a1a1e;
  --bg-surface: #14171e;
  --bg-surface-elevated: #1a1a1e;
  --bg-surface-hover: #232328;
  --bg-surface-active: #2b2b32;
  --bg-drawer: #14171e;
  --bg-glass: rgba(20, 23, 30, 0.82);
  --bg-glass-heavy: rgba(12, 14, 18, 0.92);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.15);
  --border-highlight: rgba(255, 255, 255, 0.25);
  --border-color: rgba(255, 255, 255, 0.10);
  --accent: #ff6b00;
  --accent-glow: rgba(255, 107, 0, 0.35);
  --accent-orange: #ff6b00;
  --accent-orange-hover: #ff8533;
  --accent-orange-active: #e05e00;
  --accent-orange-dim: rgba(255, 107, 0, 0.14);
  --accent-orange-border: rgba(255, 107, 0, 0.45);
  --accent-orange-solid-text: #0c0e12;
  --text-primary: #f1f3f7;
  --text-secondary: #9da6b5;
  --text-muted: #5e6777;
}

/* 2. Phosphor Emerald Matrix */
:root[data-theme="matrix-emerald"],
:root[data-theme="emerald-matrix"] {
  --bg-primary: #050b06;
  --bg-secondary: #0a160d;
  --bg-tertiary: #102115;
  --bg-surface: #0a160d;
  --bg-surface-elevated: #102115;
  --bg-surface-hover: #162d1d;
  --bg-surface-active: #1d3925;
  --bg-drawer: #0a160d;
  --bg-glass: rgba(10, 22, 13, 0.85);
  --bg-glass-heavy: rgba(5, 11, 6, 0.94);
  --border-subtle: rgba(0, 255, 102, 0.12);
  --border-medium: rgba(0, 255, 102, 0.22);
  --border-highlight: rgba(0, 255, 102, 0.40);
  --border-color: rgba(0, 255, 102, 0.15);
  --accent: #00ff66;
  --accent-glow: rgba(0, 255, 102, 0.40);
  --accent-orange: #00ff66;
  --accent-orange-hover: #33ff85;
  --accent-orange-active: #00cc52;
  --accent-orange-dim: rgba(0, 255, 102, 0.15);
  --accent-orange-border: rgba(0, 255, 102, 0.45);
  --accent-orange-solid-text: #050b06;
  --text-primary: #e6ffe6;
  --text-secondary: #70b880;
  --text-muted: #3d6e47;
}

/* 3. High-Contrast Cyberpunk Neon */
:root[data-theme="cyberpunk-neon"],
:root[data-theme="cyberpunk"] {
  --bg-primary: #0a0614;
  --bg-secondary: #140d24;
  --bg-tertiary: #1c1333;
  --bg-surface: #140d24;
  --bg-surface-elevated: #1c1333;
  --bg-surface-hover: #261a45;
  --bg-surface-active: #32225a;
  --bg-drawer: #140d24;
  --bg-glass: rgba(20, 13, 36, 0.85);
  --bg-glass-heavy: rgba(10, 6, 20, 0.94);
  --border-subtle: rgba(0, 245, 255, 0.15);
  --border-medium: rgba(0, 245, 255, 0.28);
  --border-highlight: rgba(0, 245, 255, 0.50);
  --border-color: rgba(0, 245, 255, 0.18);
  --accent: #00f5ff;
  --accent-glow: rgba(0, 245, 255, 0.45);
  --accent-orange: #00f5ff;
  --accent-orange-hover: #33f7ff;
  --accent-orange-active: #00c4cc;
  --accent-orange-dim: rgba(0, 245, 255, 0.15);
  --accent-orange-border: rgba(0, 245, 255, 0.45);
  --accent-orange-solid-text: #0a0614;
  --text-primary: #f5f0ff;
  --text-secondary: #b39ddb;
  --text-muted: #7960a3;
}

/* 4. Nordic Titanium Frost */
:root[data-theme="titanium-frost"],
:root[data-theme="titanium-silver"] {
  --bg-primary: #0f1318;
  --bg-secondary: #181d24;
  --bg-tertiary: #212730;
  --bg-surface: #181d24;
  --bg-surface-elevated: #212730;
  --bg-surface-hover: #2a323d;
  --bg-surface-active: #343d4a;
  --bg-drawer: #181d24;
  --bg-glass: rgba(24, 29, 36, 0.85);
  --bg-glass-heavy: rgba(15, 19, 24, 0.94);
  --border-subtle: rgba(226, 232, 240, 0.12);
  --border-medium: rgba(226, 232, 240, 0.22);
  --border-highlight: rgba(226, 232, 240, 0.40);
  --border-color: rgba(226, 232, 240, 0.15);
  --accent: #38bdf8;
  --accent-glow: rgba(56, 189, 248, 0.35);
  --accent-orange: #38bdf8;
  --accent-orange-hover: #60a5fa;
  --accent-orange-active: #0284c7;
  --accent-orange-dim: rgba(56, 189, 248, 0.15);
  --accent-orange-border: rgba(56, 189, 248, 0.45);
  --accent-orange-solid-text: #0f1318;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
}

/* 5. Arcade Velvet Crimson */
:root[data-theme="velvet-crimson"],
:root[data-theme="crimson-cyber"] {
  --bg-primary: #12080a;
  --bg-secondary: #1d0f12;
  --bg-tertiary: #28151a;
  --bg-surface: #1d0f12;
  --bg-surface-elevated: #28151a;
  --bg-surface-hover: #351c23;
  --bg-surface-active: #43242c;
  --bg-drawer: #1d0f12;
  --bg-glass: rgba(29, 15, 18, 0.85);
  --bg-glass-heavy: rgba(18, 8, 10, 0.94);
  --border-subtle: rgba(239, 68, 68, 0.15);
  --border-medium: rgba(239, 68, 68, 0.28);
  --border-highlight: rgba(239, 68, 68, 0.50);
  --border-color: rgba(239, 68, 68, 0.18);
  --accent: #ef4444;
  --accent-glow: rgba(239, 68, 68, 0.40);
  --accent-orange: #ef4444;
  --accent-orange-hover: #f87171;
  --accent-orange-active: #dc2626;
  --accent-orange-dim: rgba(239, 68, 68, 0.15);
  --accent-orange-border: rgba(239, 68, 68, 0.45);
  --accent-orange-solid-text: #12080a;
  --text-primary: #fff1f2;
  --text-secondary: #fca5a5;
  --text-muted: #991b1b;
}

/* Reset & Box Sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--bg-surface-hover);
  border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-medium);
}

/* Base Form & Interactive Elements */
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  color-scheme: dark;
}

/* Sleek Dark Theme Dropdown Select & Options */
select,
.select-input,
.studio-select-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-block;
  background-color: var(--bg-surface-elevated, #1a1a1e);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ff6b00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 11px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-sm, 4px);
  color: var(--text-primary, #f1f3f7);
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.45rem 2.2rem 0.45rem 0.75rem;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition-fast, 0.15s ease), background-color var(--transition-fast, 0.15s ease), box-shadow var(--transition-fast, 0.15s ease);
  color-scheme: dark;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

select:hover,
.select-input:hover,
.studio-select-input:hover {
  background-color: var(--bg-surface-hover, #232328);
  border-color: var(--accent-orange-border, rgba(255, 107, 0, 0.45));
  color: var(--text-primary, #f1f3f7);
}

select:focus,
select:focus-visible,
.select-input:focus,
.select-input:focus-visible,
.studio-select-input:focus,
.studio-select-input:focus-visible {
  border-color: var(--accent-orange, #ff6b00);
  box-shadow: 0 0 0 1px var(--accent-orange, #ff6b00), 0 0 12px rgba(255, 107, 0, 0.25);
}

select option,
.select-input option,
.studio-select-input option {
  background-color: #14171e;
  color: #f1f3f7;
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
}

select option:hover,
select option:focus,
select option:checked,
.select-input option:hover,
.select-input option:focus,
.select-input option:checked,
.studio-select-input option:hover,
.studio-select-input option:focus,
.studio-select-input option:checked {
  background-color: #1a1a1e;
  color: #ff6b00;
  font-weight: 700;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--accent-orange);
  outline-offset: 2px;
}

/* ==========================================================================
   MICRO-TOOLTIP SYSTEM
   Industrial Matte Dark Tooltips with Safety Orange Accent & Shortcut Badges
   ========================================================================== */
.hub-tooltip-bubble {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-medium);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px) scale(0.97);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.hub-tooltip-bubble.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hub-tooltip-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-orange);
  flex-shrink: 0;
}

.hub-tooltip-shortcut {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  padding: 1px 4px;
  color: var(--text-secondary);
}