/* ==========================================================================
   Matrix Tool Hub (MTH) - Global Stylesheet & PWA Shell
   Brand DNA: Hyper-Clean Utilitarianism
   Palette: #FAFAFA (Canvas), #FFFFFF (Surface), #09090B (Text), #2563EB (Accent)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&family=Oswald:wght@200;300;400&display=swap');

:root {
  --canvas-bg: #FAFAFA;
  --surface-bg: #FFFFFF;
  --border-color: #E4E4E7;
  --text-primary: #09090B;
  --text-muted: #71717A;
  --action-accent: #2563EB;
  --action-accent-hover: #1D4ED8;
  color-scheme: light;
}

html.dark {
  --canvas-bg: #09090B;
  --surface-bg: #18181B;
  --border-color: #27272A;
  --text-primary: #F4F4F5;
  --text-muted: #A1A1AA;
  --action-accent: #3B82F6;
  --action-accent-hover: #2563EB;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--canvas-bg);
  color: var(--text-primary);
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* Allow text selection inside explicit text inputs, textareas, code blocks and values */
input, textarea, [contenteditable="true"], .select-text, code, pre, .font-mono, #direct-tool-url, #custom-tool-idea {
  user-select: text !important;
  -webkit-user-select: text !important;
  -webkit-touch-callout: default !important;
}

/* Hide scrollbar for clean UI */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Custom Desktop Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--canvas-bg);
}
::-webkit-scrollbar-thumb {
  background: #D4D4D8;
  border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #3F3F46;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: #52525B;
}
::-webkit-scrollbar-thumb:hover {
  background: #A1A1AA;
}

/* Shimmer Loading Animation */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-shimmer {
  background: linear-gradient(90deg, #f4f4f5 25%, #e4e4e7 50%, #f4f4f5 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

html.dark .animate-shimmer {
  background: linear-gradient(90deg, #18181B 25%, #27272A 50%, #18181B 75%);
  background-size: 200% 100%;
}

/* Custom Card Hover Elevations */
.tool-card {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}
@media (hover: hover) {
  .tool-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
  }
}

/* Pulse badge */
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.badge-live {
  animation: pulse-subtle 2s infinite ease-in-out;
}

/* iOS Safe Area Padding Helpers */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 16px);
}
.pt-safe {
  padding-top: env(safe-area-inset-top, 16px);
}

/* Animated Aurora Dots Background (from Reference) */
@keyframes aurora-wave {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.aurora-container {
  background-color: #FAFAFA;
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

html.dark .aurora-container {
  background-color: #09090B !important;
}

.aurora-dots {
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg, #059669, #e11d48, #9333ea, #2563eb, #d97706, #059669, #e11d48);
  background-size: 300% 300%;
  animation: aurora-wave 12s ease infinite;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='3' cy='3' r='2' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='3' cy='3' r='2' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: 24px 24px;
  mask-size: 24px 24px;
  opacity: 0.85;
  z-index: 1;
  pointer-events: none;
}

html.dark .aurora-dots {
  opacity: 0.95;
  background: linear-gradient(-45deg, #10b981, #f43f5e, #a855f7, #3b82f6, #f59e0b, #10b981, #f43f5e);
  background-size: 300% 300%;
}

/* Typewriter Blinking Cursor Caret */
@keyframes typing-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.typing-cursor {
  display: inline-block;
  width: 1.5px;
  height: 1.1em;
  background-color: #09090B;
  margin-left: 4px;
  vertical-align: -0.1em;
  animation: typing-blink 0.8s step-end infinite;
}

html.dark .typing-cursor {
  background-color: #F4F4F5;
}