/* Base Typography & Styling */
body {
  font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  background-color: var(--bg-app);
  color: var(--text-main);
  overflow-x: hidden;
  min-height: 100vh;
}

/* Smooth global theme switching transitions throughout the app */
body, #app, #sidebar, #workspace, .top-bar, #preview-stage, #controls-stage, #code-stage,
.code-header, .code-body, .btn, .nav-item, .category-title, .device-btn, .device-preview-bar,
.stage-tool-btn, .stage-floating-toolbar, .landing-view, .cmd-dialog-box, input, select, textarea,
.glass-card, .glass-panel, .feature-category-card, .breadcrumb-trail, .status-pill {
  transition: background-color 0.26s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.26s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

code, pre, kbd {
  font-family: var(--font-mono, 'JetBrains Mono', 'Fira Code', monospace);
  font-size: 0.825rem;
}

/* Scrollbars custom styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
}

/* Crisp technical dot grid for preview canvas */
.bg-grid-pattern {
  background-size: 20px 20px;
  background-image: 
    radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
}
body.theme-light .bg-grid-pattern {
  background-image: 
    radial-gradient(circle, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
}

/* Clean panel & card utilities */
.glass-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
}

.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.glass-card:hover {
  border-color: var(--border-strong);
}

/* Focus styles */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Syntax Highlighting Tokens */
.token-comment {
  color: #71717a;
  font-style: italic;
}
.token-selector {
  color: #f43f5e;
  font-weight: 500;
}
.token-prop {
  color: #93c5fd;
}
.token-value {
  color: #e4e4e7;
}
.token-func {
  color: #c084fc;
}
.token-number {
  color: #fbbf24;
}
.token-color {
  color: #34d399;
}
.token-tag {
  color: #f43f5e;
}
.token-attr {
  color: #93c5fd;
}
.token-string {
  color: #34d399;
}


/* Global Keyframes (used by interactive generator components) */
@keyframes rippleAnim {
  from { transform: scale(0); opacity: 1; }
  to { transform: scale(4); opacity: 0; }
}

@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Force-state overrides for Stage State Tester */
.state-force-hover *:not(button):not(a) {
  transition-duration: 0s !important;
}

.state-force-hover .nav-item,
.state-force-hover .ui-card,
.state-force-hover .glass-card {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.state-force-focus input,
.state-force-focus textarea,
.state-force-focus select {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 2px var(--accent-subtle) !important;
}