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

/* Palette: neutral graphite surfaces, one muted sage accent.
   Deliberately quiet -- the accent appears on interactive things and data, never
   as decoration. `--accent-hi` is a close tonal sibling rather than a second hue,
   so the gradients that use the pair read as a soft shift, not a rainbow.
   Both accents were checked against both surfaces with the palette validator. */
:root {
  --bg:            #0c0c0d;
  --bg-raised:     #141415;
  --surface:       rgba(255, 255, 255, 0.032);
  --surface-hi:    rgba(255, 255, 255, 0.06);
  --line:          rgba(255, 255, 255, 0.085);
  --line-hi:       rgba(255, 255, 255, 0.15);

  --text:          #ededec;
  --muted:         #a1a09c;
  --subtle:        #706f6b;

  --accent:        #7fb3ad;
  --accent-hi:     #9ac7c1;
  --accent-glow:   rgba(127, 179, 173, 0.16);
  --accent-soft:   rgba(127, 179, 173, 0.10);
  --on-accent:     #0c0c0d;

  --good:          #6fbf8f;
  --warn:          #d6a55c;
  --danger:        #d98080;

  --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"] {
  --bg:            #faf9f7;
  --bg-raised:     #ffffff;
  --surface:       rgba(28, 26, 22, 0.026);
  --surface-hi:    rgba(28, 26, 22, 0.05);
  --line:          rgba(28, 26, 22, 0.1);
  --line-hi:       rgba(28, 26, 22, 0.17);

  --text:          #1c1b19;
  --muted:         #5f5d58;
  --subtle:        #8d8b85;

  --accent:        #3d7a74;
  --accent-hi:     #2f625d;
  --accent-glow:   rgba(61, 122, 116, 0.14);
  --accent-soft:   rgba(61, 122, 116, 0.08);
  --on-accent:     #ffffff;

  --good:          #3f7d55;
  --warn:          #9a6b1f;
  --danger:        #a34a4a;

  --shadow-md: 0 6px 20px rgba(28, 26, 22, 0.06);
  --shadow-lg: 0 24px 60px rgba(28, 26, 22, 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(--accent-glow); color: var(--text); }

/* 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(127, 179, 173, 0.4), transparent 70%);
  animation: drift-a 40s var(--ease) infinite alternate;
}

.aurora-blob--b {
  width: 40vw; height: 40vw; min-width: 320px; min-height: 320px;
  top: 6vh; right: -12vw;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), 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--b {
  background: radial-gradient(circle, rgba(28, 26, 22, 0.06), 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; }
}