:root {
  --bg-slate: #f8fafc;
  --panel-slate: #ffffff;
  --panel-elevated: #ffffff;
  --border-subtle: #e2e8f0;
  --border-strong: #cbd5e1;
  --text-main: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --accent-primary: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-subtle: #eff6ff;
  --accent-border: #bfdbfe;
}

html {
  scroll-behavior: smooth;
  color-scheme: light;
}

body {
  background-color: var(--bg-slate);
  color: var(--text-main);
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -0.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: #bfdbfe;
  color: #1e3a8a;
}

/* ---- Unified readable type system (replaces techy mono/script/serif) ---- */
.font-display {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.02em;
}

.font-serif-elegant,
.font-serif,
.font-signature {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif !important;
  font-style: normal !important;
}

/* All legacy `font-mono` usages become clean sans — except the simulator console */
.font-mono {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif !important;
  letter-spacing: 0.01em;
}

/* Keep a true monospace ONLY inside the interactive simulator terminal */
#specimen-output,
#specimen-output * {
  font-family: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Consolas, Menlo, monospace !important;
  letter-spacing: 0;
}

/* ---- Readability tidy-up ---- */
h1, h2, h3 {
  letter-spacing: -0.03em;
  line-height: 1.15;
}

p {
  line-height: 1.75;
}

/* Small caps labels: soften the harsh wide-tracked techy look */
.text-xs.uppercase,
.text-\[11px\].uppercase,
.text-\[10px\].uppercase {
  letter-spacing: 0.08em;
}

/* Tiny metadata text that's hard to read: bump minimum legibility */
.text-\[10px\] {
  font-size: 0.7rem;
  line-height: 1.5;
}

/* Long uppercase paragraphs (hero intro lines) read better in normal case */
p.uppercase {
  text-transform: none;
  letter-spacing: 0.02em;
}

/* Subtle light slate grid texture */
.slate-grid {
  background-size: 28px 28px;
  background-image: 
    radial-gradient(circle, rgba(15, 23, 42, 0.08) 1px, transparent 1px);
}

/* Marquee Animations */
@keyframes marquee-left {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

@keyframes marquee-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

.animate-marquee-left {
  display: flex;
  width: max-content;
  animation: marquee-left 28s linear infinite;
}

.animate-marquee-right {
  display: flex;
  width: max-content;
  animation: marquee-right 28s linear infinite;
}

.animate-marquee-left:hover, .animate-marquee-right:hover {
  animation-play-state: paused;
}

/* Preloader Stroke Animation */
.preloader-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawStroke 2.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes drawStroke {
  0% { stroke-dashoffset: 1000; opacity: 0; }
  15% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

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

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Subtle Interactive Cursor Glow (Light Palette) */
#cursor-glow {
  pointer-events: none;
  position: fixed;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.06) 0%, rgba(99, 102, 241, 0.02) 50%, transparent 70%);
  transform: translate(-50%, -50%);
  z-index: 1;
}