/* AILUXI — shared base */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* Base palette — warm technical brown / amber */
  --bg: oklch(0.16 0.024 54);
  --bg-elev: oklch(0.195 0.030 55);
  --bg-card: oklch(0.220 0.034 56);
  --line: oklch(0.33 0.032 57);
  --line-soft: oklch(0.27 0.028 55);
  --ink: oklch(0.95 0.016 78);
  --ink-dim: oklch(0.75 0.030 64);
  --ink-mute: oklch(0.60 0.036 60);

  /* Family signal colors — same chroma, different hues */
  --c-lucidity: oklch(0.82 0.16 140);   /* phosphor green */
  --c-galvo:    oklch(0.82 0.16 75);    /* amber */
  --c-photonix: oklch(0.82 0.16 220);   /* cyan-blue */
  --c-cohearix: oklch(0.82 0.16 330);   /* magenta */
  --c-lumehaven:oklch(0.88 0.05 60);    /* warm off-white */

  --accent: var(--c-galvo);

  /* Type */
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --serif: 'Instrument Serif', 'Times New Roman', serif;

  /* Grid */
  --gutter: 24px;
  --rule: 1px;

  /* Theme-aware surfaces (overridden in light mode) */
  --bg-glass: oklch(0.16 0.024 54 / 0.85);
  --grid-line: oklch(0.36 0.035 56 / 0.4);
}

/* ===================== DAY MODE ===================== */
html[data-theme="light"] {
  /* Warm cream / tan */
  --bg: oklch(0.97 0.014 72);
  --bg-elev: oklch(0.95 0.018 70);
  --bg-card: oklch(0.925 0.022 66);
  --line: oklch(0.85 0.025 64);
  --line-soft: oklch(0.905 0.020 67);
  --ink: oklch(0.30 0.035 52);
  --ink-dim: oklch(0.47 0.035 54);
  --ink-mute: oklch(0.61 0.035 57);

  /* Family signal colors — darkened for contrast on light surfaces */
  --c-lucidity: oklch(0.55 0.16 145);
  --c-galvo:    oklch(0.58 0.15 65);
  --c-photonix: oklch(0.55 0.16 235);
  --c-cohearix: oklch(0.55 0.19 340);
  --c-lumehaven:oklch(0.55 0.05 60);

  --bg-glass: oklch(0.97 0.014 72 / 0.82);
  --grid-line: oklch(0.50 0.04 58 / 0.10);
}

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

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "ss02", "calt", "liga";
  transition: background-color 0.4s ease, color 0.4s ease;
}

body {
  min-height: 100vh;
  background-image:
    linear-gradient(transparent 95%, var(--grid-line) 95%),
    linear-gradient(90deg, transparent 95%, var(--grid-line) 95%);
  background-size: 48px 48px;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: var(--bg); }

/* ---------- Layout primitives ---------- */
.page {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
}

.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.rule-soft { border: 0; border-top: 1px solid var(--line-soft); margin: 0; }

/* ---------- Top nav ---------- */
.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 48px;
  align-items: center;
  padding: 20px 32px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 100;
  font-size: 12px;
}

.topbar-meta {
  display: flex;
  gap: 32px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}

.topbar-meta .dot { color: var(--c-lucidity); }

.topnav {
  display: flex;
  gap: 4px;
  justify-self: center;
}

.topnav a {
  padding: 6px 14px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  border: 1px solid transparent;
  transition: all 0.15s;
}
.topnav a:hover { color: var(--ink); border-color: var(--line); }
.topnav a.active { color: var(--ink); border-color: var(--line); background: var(--bg-elev); }

/* ---------- Day / Night toggle ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-mute); }
.theme-toggle .glyph { font-size: 13px; line-height: 1; }
/* show the moon when dark, the sun when light */
.theme-toggle .glyph-day { display: none; }
html[data-theme="light"] .theme-toggle .glyph-day { display: inline; }
html[data-theme="light"] .theme-toggle .glyph-night { display: none; }

/* ---------- Logo ---------- */
.logo {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}
.logo .ai {
  background: var(--ink);
  color: var(--bg);
  padding: 2px 5px;
  margin-right: 1px;
  font-weight: 700;
}
.logo .rest { letter-spacing: 0.12em; }
.logo-sub {
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

/* ---------- Section primitives ---------- */
.section {
  padding: 96px 32px;
  max-width: 1440px;
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.section-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  margin-bottom: 64px;
}

.section-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.section-tag::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  margin-top: 6px;
}

.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  max-width: 18ch;
}
.section-title em {
  font-style: italic;
  color: var(--accent);
}

.kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.eyebrow::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.15s;
}
.btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.btn-primary:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn .arrow { font-weight: 700; }

/* ---------- Product card ---------- */
.prod-card {
  position: relative;
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
}
.prod-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.prod-card .idx {
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.16em;
}
.prod-card h4 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
}
.prod-card .role {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.prod-card p {
  font-size: 12.5px;
  color: var(--ink-dim);
  line-height: 1.55;
  margin-top: auto;
}

/* ---------- Footer ---------- */
.footer {
  padding: 64px 32px 48px;
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
  font-size: 12px;
}
.footer-grid {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer h5 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  margin-bottom: 16px;
  font-weight: 500;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer a { color: var(--ink-dim); transition: color 0.15s; }
.footer a:hover { color: var(--ink); }
.footer-bottom {
  max-width: 1440px;
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  color: var(--ink-mute);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ---------- Data strip (telemetry-style) ---------- */
.datastrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  background: var(--bg-elev);
}
.datastrip > div {
  padding: 20px 24px;
  border-right: 1px solid var(--line);
}
.datastrip > div:last-child { border-right: 0; }
.datastrip .k {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.datastrip .v {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
}

/* ---------- Tweaks ---------- */
.tweaks-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 280px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  padding: 16px;
  z-index: 200;
  display: none;
  font-size: 11px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.tweaks-panel.on { display: block; }
.tweaks-panel h6 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  margin-bottom: 4px;
  font-weight: 500;
}
.tweaks-row { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.tweaks-row button {
  flex: 1;
  padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  min-width: 60px;
}
.tweaks-row button.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.tweaks-title {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--line);
}
.tweaks-title span {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em;
}

/* ---------- Palette variants (Tweaks) — dark-mode only ---------- */
html[data-theme="dark"] body[data-palette="warm"] {
  --bg: oklch(0.15 0.014 50);
  --bg-elev: oklch(0.18 0.016 50);
  --bg-card: oklch(0.2 0.018 50);
  --line: oklch(0.3 0.016 50);
  --line-soft: oklch(0.24 0.015 50);
  --ink: oklch(0.96 0.01 80);
  --ink-dim: oklch(0.72 0.02 60);
  --ink-mute: oklch(0.52 0.02 60);
  --c-lucidity: oklch(0.82 0.14 140);
  --c-galvo: oklch(0.82 0.16 60);
}
body[data-palette="mono"] {
  --c-lucidity: oklch(0.96 0.006 90);
  --c-galvo: oklch(0.96 0.006 90);
  --c-photonix: oklch(0.96 0.006 90);
  --c-cohearix: oklch(0.96 0.006 90);
  --c-lumehaven: oklch(0.96 0.006 90);
  --accent: oklch(0.96 0.006 90);
}

body[data-type="serif"] {
  --mono: 'Instrument Serif', serif;
}
body[data-type="serif"] .logo, body[data-type="serif"] .prod-card .idx,
body[data-type="serif"] .kicker, body[data-type="serif"] .eyebrow,
body[data-type="serif"] .topnav a, body[data-type="serif"] .btn,
body[data-type="serif"] .section-tag, body[data-type="serif"] .datastrip .k,
body[data-type="serif"] .footer h5, body[data-type="serif"] .footer-bottom {
  font-family: 'JetBrains Mono', monospace;
}
body[data-type="allmono"] .section-title,
body[data-type="allmono"] .prod-card h4,
body[data-type="allmono"] .hero-title,
body[data-type="allmono"] .datastrip .v {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Hero variants */
body[data-hero="minimal"] .hero-topo { opacity: 0.08; }
body[data-hero="grid"] .hero-topo { display: none; }
body[data-hero="grid"] .hero-grid-bg { display: block; }