/* Dimsyl AI Solutions — shared foundation (tokens, type, legal-page base). The hub (index.html)
   layers its own scene styles on top; the legal pages use this file alone. */
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --void: #000000;
  --surface: #0e0e0e;
  --surface-2: #131313;
  --ink: #f4f4f4;
  --ink-2: #b9b9b9;
  --ink-3: #8f8f8f;
  --line: rgba(255, 255, 255, 0.14);
  --line-2: rgba(255, 255, 255, 0.30);
  --star-o: #a8c4ff;
  --star-g: #ffd9a0;
  --star-m: #ff9a76;
  --scout: #33f0a0;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--void);
  color: var(--ink-2);
  font-family: var(--font);
  font-variation-settings: "wght" 410, "wdth" 100;
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: rgba(255, 255, 255, 0.16); color: #fff; }

a { color: var(--ink); text-decoration: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--star-o);
  outline-offset: 3px;
  border-radius: 2px;
}

/* condensed-caps utility voice (labels/readouts only — never section-heading grammar) */
.mono {
  font-variation-settings: "wght" 600, "wdth" 78;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---- legal / long-form pages ---- */
.doc-wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.doc-nav {
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.doc-nav .in { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.doc-brand {
  display: flex; align-items: center; gap: 11px;
  font-variation-settings: "wght" 800, "wdth" 120;
  letter-spacing: -0.01em; color: var(--ink); font-size: 0.98rem;
}
.doc-brand .mk { width: 15px; height: 15px; flex: none; }
.doc-nav .back { color: var(--ink-3); font-size: 0.9rem; }
.doc-nav .back:hover { color: var(--ink); }
main.doc { padding: 56px 0 96px; }
.doc h1 {
  font-variation-settings: "wght" 800, "wdth" 122;
  font-size: clamp(2rem, 5vw, 2.9rem);
  letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 6px; color: var(--ink);
  text-wrap: balance;
}
.doc .eff { color: var(--ink-3); font-size: 0.86rem; }
.doc .note {
  border: 1px solid var(--line); border-radius: 12px; padding: 15px 17px;
  color: var(--ink-2); font-size: 0.94rem; margin: 24px 0 32px; background: var(--surface);
}
.doc h2 {
  font-variation-settings: "wght" 700, "wdth" 112;
  font-size: 1.24rem; letter-spacing: -0.01em; margin: 40px 0 12px; color: var(--ink);
}
.doc p, .doc li { color: var(--ink-2); }
.doc a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.doc a:hover { text-decoration-color: var(--ink); }
.doc ul { padding-left: 20px; }
.doc li { margin: 6px 0; }
.doc strong { color: var(--ink); font-variation-settings: "wght" 600, "wdth" 100; }
.doc code {
  font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.86em;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--ink);
}
.doc-foot {
  border-top: 1px solid var(--line); padding: 26px 0; color: var(--ink-3); font-size: 0.84rem;
}
.doc-foot a { color: var(--ink-2); margin-right: 18px; }
.doc-foot a:hover { color: var(--ink); }

/* static CSS starfield for pages without the canvas (legal) — cheap, decorative */
.starfield {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 70% 20%, rgba(168,196,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 85% 60%, rgba(255,217,160,.5), transparent),
    radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 12% 80%, rgba(255,154,118,.5), transparent),
    radial-gradient(1200px 700px at 62% -10%, rgba(255,226,180,.05), transparent 60%);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}