/* ============================================================
   1. DESIGN TOKENS — change these to retheme the entire site
   ============================================================ */
:root {
  --bg-base-rgb:        8, 8, 8;
  --bg-base:            rgb(var(--bg-base-rgb));
  --bg-surface-rgb:     14, 14, 14;
  --bg-surface:         rgb(var(--bg-surface-rgb));
  --bg-card-rgb:        17, 17, 17;
  --bg-card:            rgb(var(--bg-card-rgb));
  --bg-card-hover-rgb:  22, 22, 22;
  --bg-card-hover:      rgb(var(--bg-card-hover-rgb));

  --border-rgb:         60, 60, 60;
  --border:             rgb(var(--border-rgb));
  --border-bright-rgb:  42, 42, 42;
  --border-bright:      rgb(var(--border-bright-rgb));
  --border-glow:        #3A3A3A;

  --accent-rgb:     0, 255, 135;
  --accent:         rgb(var(--accent-rgb));
  --accent-dim-rgb: 0, 204, 106;
  --accent-dim:     rgb(var(--accent-dim-rgb));
  --accent-dark-rgb:0, 77, 39;
  --accent-dark:    rgb(var(--accent-dark-rgb));
  --accent-glow:    rgba(var(--accent-rgb), 0.12);
  --accent-glow-sm: rgba(var(--accent-rgb), 0.06);

  --healthcare-rgb: 0, 212, 170;
  --healthcare:     rgb(var(--healthcare-rgb));
  --healthcare-dim: #009980;
  --healthcare-glow:rgba(var(--healthcare-rgb), 0.1);
  --manufacturing-rgb: 245, 158, 11;
  --manufacturing:  rgb(var(--manufacturing-rgb));
  --mfg-dim:        #D97706;
  --mfg-glow:       rgba(var(--manufacturing-rgb), 0.1);

  --info-rgb:       45, 127, 249;
  --info:           rgb(var(--info-rgb));
  --info-dim-rgb:   21, 43, 71;
  --info-dim:       rgb(var(--info-dim-rgb));

  --text-primary:   #F0F0F0;
  --text-secondary: #6B7280;
  --text-muted:     #3A3A3A;
  --text-label-rgb: 85, 96, 112;
  --text-label:     rgb(var(--text-label-rgb));

  --code-bg-rgb:    13, 17, 23;
  --code-bg:        rgb(var(--code-bg-rgb));

  --diagram-blue-rgb:   25, 118, 210;
  --diagram-green-rgb:  56, 142, 60;
  --diagram-red-rgb:    239, 83, 80;
  --diagram-orange-rgb: 245, 124, 0;
  --diagram-purple-rgb: 123, 31, 162;

  --diagram-blue-muted-rgb:   100, 181, 246;
  --diagram-green-muted-rgb:  129, 199, 132;
  --diagram-red-muted-rgb:    244, 143, 177;
  --diagram-orange-muted-rgb: 255, 183, 77;
  --diagram-purple-muted-rgb: 206, 147, 216;

  --diagram-blue-bg-rgb:      227, 242, 253;
  --diagram-green-bg-rgb:     232, 245, 233;
  --diagram-red-bg-rgb:       255, 205, 210;
  --diagram-orange-bg-rgb:    255, 243, 224;
  --diagram-purple-bg-rgb:    243, 229, 245;

  --font-display:   'Outfit', system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
}

/* ============================================================
   THEME VARIANTS
   ============================================================ */
html.theme-ocean-dark {
  --bg-base-rgb: 10, 10, 20; --bg-base: rgb(var(--bg-base-rgb));
  --bg-surface-rgb: 16, 16, 28; --bg-surface: rgb(var(--bg-surface-rgb));
  --bg-card-rgb: 21, 21, 32; --bg-card: rgb(var(--bg-card-rgb));
  --bg-card-hover-rgb: 26, 26, 40; --bg-card-hover: rgb(var(--bg-card-hover-rgb));
  --border-rgb: 30, 30, 46; --border: rgb(var(--border-rgb));
  --border-bright-rgb: 42, 42, 58; --border-bright: rgb(var(--border-bright-rgb));
  --border-glow: #3A3A4A;
  --accent-rgb: 59, 130, 246; --accent-dim-rgb: 37, 99, 235; --accent-dark-rgb: 20, 50, 120;
  --text-primary: #E8EAF0; --text-secondary: #6B7294; --text-muted: #3A3A50;
  --text-label-rgb: 90, 96, 128;
  --info-rgb: 59, 130, 246; --info-dim-rgb: 15, 30, 60;
  --code-bg-rgb: 10, 14, 24;
}

html.theme-sage-light {
  --bg-base-rgb: 250, 250, 248; --bg-base: rgb(var(--bg-base-rgb));
  --bg-surface-rgb: 242, 242, 238; --bg-surface: rgb(var(--bg-surface-rgb));
  --bg-card-rgb: 255, 255, 255; --bg-card: rgb(var(--bg-card-rgb));
  --bg-card-hover-rgb: 245, 245, 240; --bg-card-hover: rgb(var(--bg-card-hover-rgb));
  --border-rgb: 226, 226, 220; --border: rgb(var(--border-rgb));
  --border-bright-rgb: 208, 208, 200; --border-bright: rgb(var(--border-bright-rgb));
  --border-glow: #C0C0B8;
  --accent-rgb: 16, 163, 120; --accent-dim-rgb: 12, 130, 96; --accent-dark-rgb: 8, 80, 58;
  --accent-glow: rgba(var(--accent-rgb), 0.08); --accent-glow-sm: rgba(var(--accent-rgb), 0.04);
  --text-primary: #1A1A1A; --text-secondary: #6B7280; --text-muted: #C0C0B8;
  --text-label-rgb: 100, 110, 120;
  --info-rgb: 30, 100, 200; --info-dim-rgb: 220, 235, 250;
  --code-bg-rgb: 245, 245, 240;
  --healthcare-rgb: 10, 150, 130; --manufacturing-rgb: 200, 130, 10;
}

html.theme-azure-light {
  --bg-base-rgb: 245, 247, 250; --bg-base: rgb(var(--bg-base-rgb));
  --bg-surface-rgb: 237, 240, 245; --bg-surface: rgb(var(--bg-surface-rgb));
  --bg-card-rgb: 255, 255, 255; --bg-card: rgb(var(--bg-card-rgb));
  --bg-card-hover-rgb: 240, 243, 248; --bg-card-hover: rgb(var(--bg-card-hover-rgb));
  --border-rgb: 220, 225, 232; --border: rgb(var(--border-rgb));
  --border-bright-rgb: 200, 207, 216; --border-bright: rgb(var(--border-bright-rgb));
  --border-glow: #B8C0CC;
  --accent-rgb: 37, 99, 235; --accent-dim-rgb: 29, 78, 186; --accent-dark-rgb: 15, 40, 100;
  --accent-glow: rgba(var(--accent-rgb), 0.08); --accent-glow-sm: rgba(var(--accent-rgb), 0.04);
  --text-primary: #1A1A2E; --text-secondary: #5A6278; --text-muted: #B8C0CC;
  --text-label-rgb: 90, 98, 120;
  --info-rgb: 37, 99, 235; --info-dim-rgb: 220, 230, 250;
  --code-bg-rgb: 240, 243, 248;
  --healthcare-rgb: 10, 140, 130; --manufacturing-rgb: 200, 130, 10;
}

/* ============================================================
   BASE — only what Tailwind preflight doesn't cover
   ============================================================ */
body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ============================================================
   NAV — JS state interactions require custom CSS
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), backdrop-filter 0.3s;
  border-bottom: 1px solid transparent;
}
.nav--scrolled {
  background-color: rgba(var(--bg-base-rgb), 0.85);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: var(--border);
}
.nav__inner {
  max-width: 1200px; margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
  height: 68px; display: flex; align-items: center; gap: 2rem;
}
.nav__logo { display: flex; align-items: center; gap: 0.75rem; font-size: 1rem; font-weight: 700; color: var(--text-primary); flex-shrink: 0; }
.nav__logo-icon { color: var(--accent); display: flex; align-items: center; }
.nav__links { display: flex; align-items: center; gap: 2rem; margin-left: auto; }
.nav__link { font-size: 0.875rem; color: var(--text-secondary); transition: color 0.2s; }
.nav__link:hover, .nav__link--active { color: var(--text-primary); }
.nav__hamburger { display: none; flex-direction: column; gap: 5px; padding: 0.5rem; margin-left: 1rem; }
.nav__hamburger-bar { display: block; width: 22px; height: 1.5px; background-color: var(--text-primary); transition: transform 0.25s var(--ease-out), opacity 0.25s; }
.nav--open .nav__hamburger-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav--open .nav__hamburger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav--open .nav__hamburger-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav__drawer {
  display: none; flex-direction: column; gap: 1rem;
  padding: 1.5rem clamp(1.25rem, 5vw, 3.5rem) 2rem;
  background-color: rgba(var(--bg-base-rgb), 0.97);
  border-bottom: 1px solid var(--border);
  transform: translateY(-10px); opacity: 0; pointer-events: none;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.nav__drawer--open { opacity: 1; transform: translateY(0); pointer-events: all; }
.nav__drawer-link { font-size: 1.1rem; font-weight: 500; color: var(--text-secondary); padding-block: 0.5rem; transition: color 0.2s; }
.nav__drawer-link:hover { color: var(--text-primary); }

/* ============================================================
   HERO — radial-gradients, SVG paint, writing-mode, clamp()
   ============================================================ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: 68px; overflow: hidden; }
.hero__grid { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(var(--accent-rgb), 0.12) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; z-index: 0; }
.hero__logo-wrap { position: absolute; top: 50%; right: 2%; transform: translateY(-50%); width: clamp(400px, 52vw, 700px); height: clamp(400px, 52vw, 700px); pointer-events: none; z-index: 0; }
.hero__logo-haze { position: absolute; inset: -15%; background: radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), 0.07) 0%, transparent 65%); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.hero__logo-haze.is-ready { opacity: 1; }
.hero__logo-ghost { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(var(--accent-rgb), 0.4); stroke-width: 6; opacity: 0; transition: opacity 1.2s ease; }
.hero__logo-ghost.is-ready { opacity: 0.18; }
.hero__logo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
.hero__logo-canvas.is-ready { opacity: 1; }
.hero__scroll-label { position: absolute; left: clamp(1.25rem, 3vw, 2.5rem); bottom: 3rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; z-index: 2; }
.hero__scroll-text { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.18em; color: var(--text-muted); writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); }
.hero__scroll-line { display: block; width: 1px; height: 48px; background: linear-gradient(to bottom, var(--text-muted), transparent); animation: scrollBounce 1.8s ease-in-out infinite; }
.hero__content { position: relative; z-index: 2; max-width: 900px; padding-block: 6rem; margin-inline: 0; }
.hero__headline { font-size: clamp(3.5rem, 5.5vw, 5rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; color: var(--text-primary); margin-bottom: 1.5rem; }
.hero__headline .word { display: inline-block; opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.hero__headline .word--visible { opacity: 1; transform: translateY(0); }
.hero__sub { font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 500; line-height: 1.65; color: var(--text-secondary); margin-bottom: 2.5rem; opacity: 0; transform: translateY(16px); }
.hero__sub.is-visible { animation: fadeUp 0.6s var(--ease-out) forwards; }
.hero__trust { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--text-secondary); opacity: 0; transform: translateY(10px); }
.hero__trust.is-visible { animation: fadeUp 0.5s var(--ease-out) forwards; }

/* ============================================================
   THEME SWATCH — multi-layer inset box-shadow
   ============================================================ */
.theme-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-bright); background: var(--swatch-bg); box-shadow: inset 0 0 0 4px var(--swatch-bg), inset 0 0 0 12px var(--swatch-accent); cursor: pointer; transition: border-color 0.2s, transform 0.2s; padding: 0; }
.theme-swatch:hover { border-color: var(--text-secondary); transform: scale(1.15); }
.theme-swatch--active { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--swatch-bg), inset 0 0 0 12px var(--swatch-accent), 0 0 0 2px var(--accent); }

/* ============================================================
   ANIMATIONS — keyframes and scroll-triggered
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.3; }
  50%      { transform: translateY(8px); opacity: 0.8; }
}

[data-animate] { opacity: 0; transform: translateY(32px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
[data-animate].is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   RESPONSIVE — only for irreplaceable components
   ============================================================ */
@media (max-width: 1024px) {
  .hero__logo-wrap {
    right: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(350px, 75vw, 600px);
    height: clamp(350px, 75vw, 600px);
    opacity: 0.45;
    z-index: 0;
  }
  .hero__logo-ghost.is-ready { opacity: 0.15; }
  .hero__logo-canvas.is-ready { opacity: 0.85; }
  .hero__logo-haze { inset: -25%; }
  .hero__logo-haze.is-ready { opacity: 1; }
  .hero__content { text-align: center; margin-inline: auto; }
}
@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__hamburger { display: flex; margin-left: auto; }
  .nav__drawer { display: flex; position: absolute; top: 100%; left: 0; right: 0; }
  .hero__headline { font-size: clamp(2.8rem, 12vw, 4.5rem); line-height: 1.02; letter-spacing: -0.04em; }
  .hero__scroll-label { display: none; }
  .hero__logo-wrap {
    width: clamp(420px, 130vw, 600px);
    height: clamp(420px, 130vw, 600px);
    opacity: 0.7;
  }
  .hero__logo-ghost.is-ready { opacity: 0.35; }
  .hero__logo-canvas.is-ready { opacity: 1; }
  .hero__logo-haze { inset: -35%; }
  .hero__content { padding-inline: 1rem; }
  .hero__sub { font-size: clamp(0.95rem, 3.5vw, 1.25rem); }
}