/* ==========================================================================
   PROFLIC TECHNOLOGIES — MINIMAL PREMIUM INDUSTRIAL DESIGN SYSTEM
   Clean, Restrained, High-Contrast Typography & Subtle Blueprint Grids
   ========================================================================== */

/* Design Tokens */
:root {
  /* Brand Accents */
  --color-primary: #0052FF;
  --color-primary-hover: #0040D6;
  --color-accent: #00C8FF;
  --color-accent-muted: rgba(0, 200, 255, 0.08);
  --color-laser: #00E5FF;
  --color-nominal: #10B981;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;

  /* Dark Theme Tokens (Default — Calm, Premium Slate Navy) */
  --bg-app: #080E1A;
  --bg-surface: #0D1629;
  --bg-surface-elevated: #111D36;
  --bg-card: #0F1A30;
  --bg-card-hover: #142240;
  --bg-dro: #060B14;
  --bg-input: #0B1324;
  --text-main: #F8FAFC;
  --text-muted: #94A3B8;
  --text-dim: #64748B;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.16);
  --border-highlight: #0052FF;
  --grid-line: rgba(255, 255, 255, 0.025);
  --grid-dense: rgba(255, 255, 255, 0.018);
  --nav-bg: rgba(8, 14, 26, 0.85);
  --card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.3);
}

/* Light Theme Tokens — Clean Modern Blueprint + Tech SaaS */
html.light {
  --bg-app: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #F1F5F9;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F8FAFC;
  --bg-dro: #0F172A;
  --bg-input: #FFFFFF;
  --text-main: #0F172A;
  --text-muted: #475569;
  --text-dim: #64748B;
  --border-subtle: #E2E8F0;
  --border-medium: #CBD5E1;
  --border-highlight: #0052FF;
  --grid-line: rgba(0, 82, 255, 0.04);
  --grid-dense: rgba(0, 82, 255, 0.025);
  --nav-bg: rgba(255, 255, 255, 0.92);
  --card-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.06);
}

/* Base Global Styles */
html {
  scroll-behavior: smooth;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color-scheme: dark;
}

html.light {
  color-scheme: light;
}

body {
  background-color: var(--bg-app);
  color: var(--text-main);
  transition: background-color 0.25s ease, color 0.25s ease;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Typography Utility Classes */
.font-heading {
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.02em;
}

.font-body {
  font-family: 'Inter', sans-serif;
}

.font-mono-tech {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: 'tnum' on, 'zero' on;
}

.section-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem; /* 11px */
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0052FF;
}

html.dark .section-eyebrow {
  color: #38BDF8;
}

/* Subtle Blueprint Grid Patterns (Barely noticeable background texture) */
.blueprint-bg {
  background-image: 
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
}

.blueprint-grid-dense {
  background-image: 
    linear-gradient(to right, var(--grid-dense) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-dense) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Refined Metrology Panel Design System (Clean, subtle, not boxy) */
.metrology-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 1rem;
  box-shadow: var(--card-shadow);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.metrology-panel-hover:hover {
  border-color: var(--border-medium);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.2);
}

html.light .metrology-panel-hover:hover {
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08);
}

/* Clean Sticky Header (Refined floating nav) */
.site-header {
  background: transparent;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header.scrolled {
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Monospace Digital Readout Screen (DRO) */
.dro-screen {
  background-color: var(--bg-dro);
  border: 1px solid var(--border-subtle);
  font-family: 'JetBrains Mono', monospace;
}

/* Deviation Heatmap Legend Scale */
.heatmap-scale {
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(90deg, #3B82F6 0%, #06B6D4 25%, #10B981 50%, #F59E0B 75%, #EF4444 100%);
}

/* GD&T Feature Control Frame Component */
.gdt-frame {
  display: inline-flex;
  border: 1px solid var(--text-dim);
  border-collapse: collapse;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.gdt-cell {
  padding: 3px 6px;
  border-right: 1px solid var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gdt-cell:last-child {
  border-right: none;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-app);
}

::-webkit-scrollbar-thumb {
  background: #1E293B;
  border-radius: 3px;
}

html.light ::-webkit-scrollbar-thumb {
  background: #CBD5E1;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* Accessibility Focus States */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   LIGHT THEME OVERRIDES (CLEAN TECH BLUEPRINT)
   ========================================================================== */
html.light .text-white {
  color: #0F172A !important;
}

html.light .text-gray-200,
html.light .text-slate-200 {
  color: #1E293B !important;
}

html.light .text-gray-300,
html.light .text-slate-300 {
  color: #334155 !important;
}

html.light .text-gray-400,
html.light .text-slate-400 {
  color: #64748B !important;
}

html.light .text-gray-500,
html.light .text-slate-500 {
  color: #94A3B8 !important;
}

html.light .text-cyan-300,
html.light .text-cyan-400 {
  color: #0052FF !important;
}

/* Light Mode Input & Dropdown Styling */
html.light input,
html.light select,
html.light textarea {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}

html.light input:focus,
html.light select:focus,
html.light textarea:focus {
  border-color: #0052FF !important;
}

html.light input::placeholder,
html.light textarea::placeholder {
  color: #94A3B8 !important;
}

html.light select option {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
}

/* Light Mode Background Section Overrides */
html.light .bg-slate-900,
html.light .bg-slate-950,
html.light .bg-slate-900\/20,
html.light .bg-slate-900\/30,
html.light .bg-slate-900\/40,
html.light .bg-slate-900\/60,
html.light .bg-slate-950\/70,
html.light .bg-\[\#050A14\],
html.light .bg-\[\#070D18\],
html.light .bg-\[\#080E1A\] {
  background-color: #F8FAFC !important;
}

html.light .border-slate-800,
html.light .border-slate-700,
html.light .border-slate-900 {
  border-color: #E2E8F0 !important;
}

html.light .divide-slate-800 > :not([hidden]) ~ :not([hidden]) {
  border-color: #E2E8F0 !important;
}

html.light .bg-black\/40,
html.light .bg-black\/50,
html.light .bg-black\/60,
html.light .bg-black\/70,
html.light .bg-black\/80,
html.light .bg-black\/85,
html.light .bg-black\/90 {
  background-color: #F1F5F9 !important;
  color: #0F172A !important;
  border-color: #E2E8F0 !important;
}

/* Solid Clean Buttons in Light Mode */
html.light .bg-blue-600,
html.light .bg-blue-500,
html.light button.bg-blue-600,
html.light a.bg-blue-600 {
  background-color: #0052FF !important;
  color: #FFFFFF !important;
}

html.light .bg-blue-600 *,
html.light button.bg-blue-600 *,
html.light a.bg-blue-600 * {
  color: #FFFFFF !important;
}

html.light .bg-blue-600:hover,
html.light button.bg-blue-600:hover,
html.light a.bg-blue-600:hover {
  background-color: #0040D6 !important;
  color: #FFFFFF !important;
}

/* DRO Canvas Background stays dark for optical contrast */
html.light #simCanvas {
  background-color: #0B1324 !important;
}

html.light #cadVisualizerCanvas {
  background-color: #0B1324 !important;
}