/* Survey in Saudi - Precision Geomatics & Hydrographic Portal
   Design System: Corporate Modern Industrial (precision_surveying_intelligence)
   Tokens: Deep Navy (#0B192C), Slate Gray (#64748B), Industrial Amber (#F97316)
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
  --primary-navy: #0B192C;
  --primary-navy-dark: #07111E;
  --primary-navy-light: #1A2D47;
  --slate-gray: #64748B;
  --safety-amber: #F97316;
  --safety-amber-hover: #EA580C;
  --safety-amber-light: #FFF7ED;
  --bg-canvas: #F8FAFC;
  --surface-card: #FFFFFF;
  --surface-low: #F1F5F9;
  --border-hairline: #E2E8F0;
  --border-tech: #CBD5E1;
  --status-emerald: #10B981;
  --status-emerald-dark: #166534;
  --status-emerald-bg: #F0FDF4;
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
}

/* Base resets & typography */
html {
  scroll-behavior: smooth;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-canvas);
  color: #191c1e;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* OpenType Tabular lining figures for geodetic coordinates, depth soundings, and metrics */
.font-technical-mono,
.tabular-nums,
[data-tabular="true"] {
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-feature-settings: "tnum" 1, "cv05" 1, "zero" 1;
}

/* Material Symbols alignment */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  display: inline-block;
  user-select: none;
}

.material-symbols-outlined.fill-1 {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Range input styling matching Stitch token */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--safety-amber);
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.2);
  transition: all 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: var(--safety-amber-hover);
  box-shadow: 0 0 0 6px rgba(249, 115, 22, 0.3);
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--safety-amber);
  cursor: pointer;
  border: none;
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.2);
}

/* Custom subtle scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Technical pulse animation */
@keyframes pulseGlow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.15);
  }
}

.pulse-live {
  animation: pulseGlow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Drag and Drop Zone active feedback */
.dropzone-active {
  border-color: var(--safety-amber) !important;
  background-color: rgba(249, 115, 22, 0.04) !important;
}

/* Sticky TOC active state styling */
.toc-link.active {
  background-color: #E2E8F0;
  color: var(--primary-navy);
  font-weight: 600;
  border-left: 3px solid var(--safety-amber);
}