/* ============================================================
   SupaVector — design system
   Dark-first, one accent family, generous type, quiet motion.
   ============================================================ */

/* ── The two faces, self-hosted ───────────────────────────
   Served from our own origin rather than fonts.googleapis.com. Google's
   stylesheet is render-blocking and costs two extra DNS + TLS handshakes
   before the first byte of a font arrives — on a phone on a weak connection
   that is most of a second in which nothing can paint. These are one hop on a
   connection the browser already has open.

   Inter is the variable file: 400–700 in 48 KB, where the three static weights
   it replaces were 145 KB. Latin subset only, matching blog-drafts/fonts.

   font-display: swap — text appears immediately in the fallback and reflows
   when the face lands. Slower to settle, but never invisible, which is the
   right trade for an article someone came to read. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-serif.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-serif-italic.woff2") format("woff2");
}

/* Palette: one monochrome family, two modes (ChatGPT-style).
   Dark: neutral charcoal surfaces, white as the accent, black text on accent.
   Light: the exact inverse — soft gray page, white cards, black as the accent,
   white text on accent. `--accent-hi` is the hover state, a tonal step toward
   the background, so gradients using the pair stay monochrome. Color appears
   only in the status tokens (--good/--warn/--danger), the brand logo, and the
   whisper-level --brand gold (selection, caret, ambient wash) — never on
   buttons or any structural surface. */
:root {
  --bg:            #212121;
  --bg-raised:     #2f2f2f;
  --surface:       rgba(255, 255, 255, 0.04);
  --surface-hi:    rgba(255, 255, 255, 0.07);
  --line:          rgba(255, 255, 255, 0.1);
  --line-hi:       rgba(255, 255, 255, 0.18);

  --text:          #ececec;
  --muted:         #b4b4b4;
  --subtle:        #8e8e8e;

  --accent:        #ffffff;
  --accent-hi:     #e3e3e3;
  --accent-glow:   rgba(255, 255, 255, 0.14);
  --accent-soft:   rgba(255, 255, 255, 0.08);
  --on-accent:     #0d0d0d;

  /* Brand tint: the gold from the logo's arrow. Never structural — it only
     appears in whisper-level details (selection, caret, ambient wash). */
  --brand:         #f5b429;
  --brand-soft:    rgba(245, 180, 41, 0.16);

  --good:          #66bb8f;
  --warn:          #d6a55c;
  --danger:        #e57979;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-pill: 999px;

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.42);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-max: 1240px;   /* in line with current AI-product sites (1200–1280) */
}

:root[data-theme="light"] {
  /* Near-white, not gray: #f7f7f8 read as dull next to the white cards. The
     step to the cards is now carried by the border + shadow, like ChatGPT's
     light surfaces, with just enough tint that white cards still register. */
  --bg:            #fdfdfd;
  --bg-raised:     #ffffff;
  --surface:       rgba(13, 13, 13, 0.03);
  --surface-hi:    rgba(13, 13, 13, 0.055);
  --line:          rgba(13, 13, 13, 0.1);
  --line-hi:       rgba(13, 13, 13, 0.17);

  --text:          #0d0d0d;
  --muted:         #5d5d5d;
  --subtle:        #8f8f8f;

  --accent:        #0d0d0d;
  --accent-hi:     #2f2f2f;
  --accent-glow:   rgba(13, 13, 13, 0.1);
  --accent-soft:   rgba(13, 13, 13, 0.06);
  --on-accent:     #ffffff;

  --brand:         #9a6b1f;
  --brand-soft:    rgba(200, 148, 34, 0.18);

  --good:          #0e8265;
  --warn:          #b45309;
  --danger:        #c62828;

  --shadow-md: 0 6px 20px rgba(13, 13, 13, 0.06);
  --shadow-lg: 0 24px 60px rgba(13, 13, 13, 0.1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--brand-soft); color: var(--text); }
input, textarea { caret-color: var(--brand); }

/* Icons carry no intrinsic size, so without this they fall back to the 300x150
   default replaced-element box. Class-scoped rules below override it. */
svg { width: 1.05em; height: 1.05em; flex: none; }
.btn svg { width: 16px; height: 16px; }

/* ── Ambient background ─────────────────────────────────── */

.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* A faint tonal wash, not an aurora. Two low-opacity neutral blooms with a hint
   of the accent, so the page has depth without looking like a product launch. */
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.22;
  will-change: transform;
}

.aurora-blob--a {
  width: 46vw; height: 46vw; min-width: 380px; min-height: 380px;
  top: -16vw; left: -10vw;
  background: radial-gradient(circle, rgba(245, 180, 41, 0.22), transparent 70%);
  animation: drift-a 40s var(--ease) infinite alternate;
}

/* The second bloom carries the brand-mark blue — gold on one side, blue on
   the other, both at whisper level so the page warms without shouting. */
.aurora-blob--b {
  width: 40vw; height: 40vw; min-width: 320px; min-height: 320px;
  top: 6vh; right: -12vw;
  background: radial-gradient(circle, rgba(45, 127, 249, 0.18), transparent 70%);
  animation: drift-b 48s var(--ease) infinite alternate;
}

/* The third bloom was the loudest element on the page. */
.aurora-blob--c { display: none; }

:root[data-theme="light"] .aurora-blob { opacity: 0.28; }
:root[data-theme="light"] .aurora-blob--a {
  background: radial-gradient(circle, rgba(200, 148, 34, 0.14), transparent 70%);
}
:root[data-theme="light"] .aurora-blob--b {
  background: radial-gradient(circle, rgba(45, 127, 249, 0.09), transparent 70%);
}

.aurora-grid {
  position: absolute;
  inset: -50%;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.35;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 20%, transparent 75%);
}

@keyframes drift-a { to { transform: translate3d(6vw, 8vh, 0) scale(1.15); } }
@keyframes drift-b { to { transform: translate3d(-8vw, 6vh, 0) scale(1.1); } }
@keyframes drift-c { to { transform: translate3d(4vw, -8vh, 0) scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  .aurora-blob { animation: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}