/* ============================================================================
   wede — website design system
   Mirrors the "Wede Midnight" theme shipped in the app (src/index.css):
   warm indigo-tinted neutrals, electric-indigo accent, coral spark from the
   logo slash. Fonts are vendored locally (no Google Fonts, no runtime CDN) —
   the same sovereignty rule the product itself follows.
   ========================================================================= */

/* ── Fonts (self-hosted, latin subset) ───────────────────────────────────── */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(./fonts/space-grotesk-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(./fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── Tokens: dark ("Wede Midnight") ──────────────────────────────────────── */
:root {
  --bg-base:      #0c0e14;
  --bg-primary:   #11131a;
  --bg-secondary: #161921;
  --bg-tertiary:  #0e1018;
  --bg-hover:     #1c1f2b;
  --bg-active:    #242737;
  --bg-elevated:  #1a1d28;

  --border:        #1e2130;
  --border-subtle: #191c27;
  --border-active: #2e3348;
  --border-strong: #353a52;

  --text:       #e8eaf2;
  --text-2:     #8b91ab;
  --text-muted: #545b75;

  --accent:       #7c8cf8;
  --accent-hover: #9aa4fb;
  --accent-dim:   rgba(124, 140, 248, 0.12);
  --accent-glow:  rgba(124, 140, 248, 0.18);
  --on-accent:    #0c0e14;

  --spark:  #ff5e57;   /* the slash in the logo */
  --green:  #4ade80;
  --red:    #f87171;
  --yellow: #fbbf24;
  --peach:  #fb923c;
  --mauve:  #c084fc;
  --cyan:   #22d3ee;
  --pink:   #f472b6;

  --status-bar: #1c1f2b;

  --shadow:    rgba(0, 0, 0, 0.55);
  --shadow-lg: rgba(0, 0, 0, 0.75);
  --grid-line: rgba(124, 140, 248, 0.05);
  --glass:     rgba(14, 16, 24, 0.72);
  --wash:      rgba(255, 255, 255, 0.03);

  /* syntax (matches the app's CodeMirror dark palette) */
  --sx-kw: #c084fc; --sx-fn: #7c8cf8; --sx-str: #4ade80;
  --sx-num: #fb923c; --sx-type: #22d3ee; --sx-cmt: #545b75; --sx-punc: #8b91ab;

  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px;
  --max: 1180px;

  --sans:    'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Space Grotesk Variable', 'Inter Variable', -apple-system, sans-serif;
  --mono:    'JetBrains Mono Variable', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;

  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: dark;
}

/* ── Tokens: light ───────────────────────────────────────────────────────── */
:root[data-theme="light"] {
  --bg-base:      #f0f2f7;
  --bg-primary:   #ffffff;
  --bg-secondary: #f5f7fc;
  --bg-tertiary:  #edf0f7;
  --bg-hover:     #eaedf5;
  --bg-active:    #dde1ef;
  --bg-elevated:  #ffffff;

  --border:        #dde1ef;
  --border-subtle: #e8eaf2;
  --border-active: #bdc4dc;
  --border-strong: #a0aac4;

  --text:       #111827;
  --text-2:     #4b5577;
  --text-muted: #8b91ab;

  --accent:       #4f5ff7;
  --accent-hover: #3b4bef;
  --accent-dim:   rgba(79, 95, 247, 0.08);
  --accent-glow:  rgba(79, 95, 247, 0.12);
  --on-accent:    #ffffff;

  --spark:  #e0413a;
  --green:  #16a34a;
  --red:    #dc2626;
  --yellow: #d97706;
  --peach:  #ea580c;
  --mauve:  #7c3aed;
  --cyan:   #0891b2;
  --pink:   #db2777;

  --status-bar: #eaedf5;

  --shadow:    rgba(23, 30, 63, 0.10);
  --shadow-lg: rgba(23, 30, 63, 0.20);
  --grid-line: rgba(79, 95, 247, 0.055);
  --glass:     rgba(240, 242, 247, 0.78);
  --wash:      rgba(17, 24, 39, 0.025);

  --sx-kw: #7c3aed; --sx-fn: #4f5ff7; --sx-str: #16a34a;
  --sx-num: #ea580c; --sx-type: #0891b2; --sx-cmt: #8b91ab; --sx-punc: #4b5577;
  color-scheme: light;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
::selection { background: var(--accent-glow); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Atmosphere: indigo glow + faint editor grid */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 520px at 78% -8%,  var(--accent-glow), transparent 62%),
    radial-gradient(760px 440px at -8% 4%,   color-mix(in srgb, var(--mauve) 12%, transparent), transparent 58%),
    var(--bg-base);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 120% 68% at 50% 0%, #000 28%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 120% 68% at 50% 0%, #000 28%, transparent 76%);
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 clamp(18px, 4vw, 32px); }
.mono { font-family: var(--mono); }
.accent { color: var(--accent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Top bar (mirrors the app's top bar) ─────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.topbar .bar { display: flex; align-items: center; gap: 12px; height: 56px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.brand .mark {
  width: 30px; height: 30px; border-radius: 8px; flex: none; padding: 4px;
  /* the mark's stripes are near-black, so the tile stays light in both themes */
  background: linear-gradient(150deg, #ffffff, #dfe3ea);
  border: 1px solid var(--border-active);
  box-shadow: 0 2px 10px -3px var(--shadow), inset 0 1px 0 rgba(255,255,255,.6);
  display: grid; place-items: center;
}
.brand .mark img { width: 100%; height: 100%; object-fit: contain; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 10px; border-radius: 999px;
  background: var(--bg-secondary); border: 1px solid var(--border);
  font-family: var(--mono); font-size: 12.5px; color: var(--text-2); white-space: nowrap;
}
.chip svg { width: 13px; height: 13px; flex: none; }
.chip img { width: 14px; height: 14px; border-radius: 3px; }
a.chip { transition: border-color .16s, color .16s; }
a.chip:hover { border-color: var(--accent); color: var(--text); }
.spacer { flex: 1; }
.navlinks { display: flex; align-items: center; gap: 2px; }
.navlinks a {
  padding: 7px 12px; border-radius: var(--radius-md);
  font-size: 14px; font-weight: 500; color: var(--text-2);
  transition: color .16s, background .16s;
}
.navlinks a:hover { color: var(--text); background: var(--bg-hover); }
.navlinks a.on { color: var(--text); background: var(--bg-active); }
.iconbtn {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border-radius: var(--radius-md); border: 1px solid transparent;
  background: transparent; color: var(--text-2); cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}
.iconbtn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border); }
.iconbtn svg { width: 17px; height: 17px; }
.theme-toggle .moon { display: none; }
:root[data-theme="light"] .theme-toggle .moon { display: block; }
:root[data-theme="light"] .theme-toggle .sun { display: none; }
@media (max-width: 940px) { .navlinks, .topbar .chip { display: none; } }
@media (max-width: 460px) { .topbar .btn-primary { display: none; } }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--radius-lg);
  font-family: var(--sans); font-size: 14.5px; font-weight: 600; letter-spacing: -.005em;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .15s var(--ease), box-shadow .2s, background .2s, border-color .2s, color .2s;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-primary {
  background: linear-gradient(140deg, var(--accent-hover), var(--accent));
  color: var(--on-accent);
  box-shadow: 0 6px 22px -8px color-mix(in srgb, var(--accent) 85%, transparent), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover { transform: translateY(-1.5px); box-shadow: 0 12px 32px -10px color-mix(in srgb, var(--accent) 95%, transparent), inset 0 1px 0 rgba(255,255,255,.24); }
.btn-ghost { background: var(--bg-secondary); border-color: var(--border-active); color: var(--text); }
.btn-ghost:hover { transform: translateY(-1.5px); border-color: var(--border-strong); background: var(--bg-hover); }
.btn-sm { padding: 7px 13px; font-size: 13.5px; border-radius: var(--radius-md); }

/* ── Section scaffolding ─────────────────────────────────────────────────── */
.section { padding: clamp(56px, 8vw, 100px) 0; position: relative; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase; color: var(--accent);
}
.eyebrow::before { content: ""; width: 20px; height: 1px; background: currentColor; opacity: .55; }
h2.title {
  font-family: var(--display); font-weight: 600; letter-spacing: -.03em;
  font-size: clamp(28px, 4.2vw, 42px); line-height: 1.1; margin: 14px 0 0;
}
.lead { color: var(--text-2); font-size: clamp(15.5px, 1.6vw, 17.5px); margin: 14px 0 0; max-width: 62ch; }
.section-head { margin-bottom: clamp(30px, 4vw, 48px); }

/* ── Reveal on scroll ────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ── Editor window chrome (the signature element) ────────────────────────── */
.window {
  border: 1px solid var(--border-active); border-radius: var(--radius-xl);
  background: var(--bg-primary); overflow: hidden;
  box-shadow: 0 32px 70px -34px var(--shadow-lg);
}
.window-bar {
  display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px;
  background: var(--bg-tertiary); border-bottom: 1px solid var(--border);
}
.dots { display: flex; gap: 6px; flex: none; }
.dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.dots i:nth-child(1) { background: color-mix(in srgb, var(--red) 72%, var(--border-strong)); }
.dots i:nth-child(2) { background: color-mix(in srgb, var(--yellow) 62%, var(--border-strong)); }
.dots i:nth-child(3) { background: color-mix(in srgb, var(--green) 62%, var(--border-strong)); }
.window-bar .label { font-family: var(--mono); font-size: 12.5px; color: var(--text-muted); }
.statusline {
  display: flex; align-items: center; gap: 14px; min-height: 27px; padding: 0 12px;
  background: var(--status-bar); border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 12px; color: var(--text-2);
}
.statusline .right { margin-left: auto; display: flex; gap: 14px; }
.statusline .br { color: var(--accent); }
@media (max-width: 620px) { .hide-sm { display: none !important; } }
@media (max-width: 620px) { .kbtn kbd { display: none; } }

/* ── Touch targets: ≥44×44 for standalone controls on touch-scale widths ── */
@media (max-width: 768px) {
  .iconbtn { width: 44px; height: 44px; }
  .kbtn { height: 44px; }
  .btn { min-height: 44px; }
  .btn-sm { min-height: 44px; padding: 9px 14px; }
}

/* Code surface */
.code {
  font-family: var(--mono); font-size: 13px; line-height: 1.75;
  padding: 16px 18px; margin: 0; overflow: auto; color: var(--text);
  background: var(--bg-primary); tab-size: 2;
}
.code .kw { color: var(--sx-kw); } .code .fn { color: var(--sx-fn); }
.code .str { color: var(--sx-str); } .code .num { color: var(--sx-num); }
.code .ty { color: var(--sx-type); } .code .cm { color: var(--sx-cmt); font-style: italic; }
.code .pu { color: var(--sx-punc); }
.code::-webkit-scrollbar { height: 8px; width: 8px; }
.code::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--border); background: var(--bg-tertiary); margin-top: 40px; }
.foot-grid {
  display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 32px;
  padding: 48px 0 36px;
}
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid h4 {
  margin: 0 0 12px; font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted);
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot-grid a { color: var(--text-2); font-size: 14px; transition: color .15s; }
.foot-grid a:hover { color: var(--accent); }
.foot-blurb { color: var(--text-2); font-size: 14px; margin: 14px 0 0; max-width: 42ch; }
.foot-bar {
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  padding: 14px 0; font-family: var(--mono); font-size: 12.5px; color: var(--text-muted);
}.foot-bar a:hover { color: var(--accent); }

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}


/* ── Vulos suite chrome — identical on every product landing ───────────────
   Two elements, and only two: a logo-only home button in the top bar, and
   one line in the footer. Deliberately free of repo variables so the block
   is byte-identical across the suite and can be diffed as one thing. */
.vulos-home { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; opacity: .72; transition: opacity .15s ease, transform .15s ease; }
.vulos-home:hover, .vulos-home:focus-visible { opacity: 1; transform: translateY(-1px); }
.vulos-home img { display: block; width: 22px; height: 22px; border-radius: 6px; }
.vulos-foot { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; line-height: 1.45; text-decoration: none; color: inherit; opacity: .85; transition: opacity .15s ease; }
.vulos-foot:hover { opacity: 1; text-decoration: none; }
.vulos-foot img { display: block; width: 18px; height: 18px; border-radius: 5px; flex: 0 0 auto; }

/* Dark-ground correction for the mark above. vulos-logo.png is flat #2E383A
   on transparency — ink drawn for paper — so composited on this surface it
   measures about 1.3:1 and reads as a smudge, not as a dimmed logo. The
   artwork carries its whole shape in the alpha channel, so brightness(0)
   invert(1) recolours it to the surface's foreground with the glyph intact,
   and the opacity holds it at the same secondary weight the light theme
   gives it. Styling only: the chrome markup stays byte-identical suite-wide. */
:root:not([data-theme="light"]) .vulos-home img,
:root:not([data-theme="light"]) .vulos-foot img { filter: brightness(0) invert(1); opacity: .66; }