/* ============================================================
   VEDA for Automotive — design tokens & base
   Sub-brand of Athira. Warm editorial DNA + instrument-panel
   telemetry energy. Built around a 30-second skeptical read.
   ============================================================ */

/* ---- Fonts: Geist (brand primary, via fontsource) with Instrument
   Sans fallback; Instrument Serif italic accents; mono telemetry ---- */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Instrument+Serif:ital@0;1&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.0.3/400.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.0.3/500.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.0.3/600.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.0.3/700.css');

:root {
  /* paper / warm neutrals */
  --paper:      #F4F1EA;   /* base page */
  --paper-2:    #EDE8DF;   /* slightly deeper */
  --paper-hero: linear-gradient(123deg, #EEEAE2 -36%, #E5E0D7 32%, #E1D6D1 52%, #DCD7D3 70%, #E8E7E4 100%);
  --line:       #DAD4C8;   /* hairlines on paper */
  --line-soft:  #E3DED4;

  /* ink */
  --ink:        #0E0E10;   /* headlines */
  --ink-2:      #3C3C40;   /* body */
  --ink-3:      #6B6B70;   /* muted / labels */
  --ink-4:      #94908A;   /* faint */

  /* dark surfaces */
  --noir:       #0B0B0C;   /* avatar windows / dark sections */
  --noir-2:     #0F0F11;
  --noir-3:     #16161A;   /* raised cards on noir */
  --noir-line:  rgba(255,255,255,0.08);
  --noir-line-2:rgba(255,255,255,0.05);
  --on-noir:    #ECE9E2;   /* text on dark */
  --on-noir-2:  #9A968E;   /* muted on dark */

  /* signature accent — bronze */
  --bronze:     #C9A36B;
  --bronze-2:   #B8924F;
  --bronze-deep:#8A6A3A;
  --bronze-glow: rgba(201,163,107,0.55);

  /* semantic */
  --loss:       #C5544B;   /* cost-of-doing-nothing / loss figures */
  --loss-soft:  #D98178;
  --gain:       #4FA383;   /* veda outcomes */
  --gain-soft:  #6FBE9F;

  /* type */
  --sans: "Geist", "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* rhythm */
  --maxw: 1180px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01";
}

::selection { background: rgba(201,163,107,0.30); color: var(--ink); }

h1, h2, h3 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.04;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }

/* serif italic accent — the brand signature */
.ser {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

/* mono telemetry eyebrow */
.eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow--noir { color: var(--on-noir-2); }

/* layout helpers */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.section { padding: clamp(72px, 11vw, 148px) 0; position: relative; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-weight: 500; font-size: 16px; letter-spacing: 0.01em;
  padding: 16px 26px; border-radius: 12px; cursor: pointer; border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: linear-gradient(180deg, #454442 0%, #2C2B29 100%);
  color: #F4EFE6;
  box-shadow: 0 6px 22px -6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.10);
}
.btn--primary:hover { box-shadow: 0 12px 34px -8px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.14); transform: translateY(-1px); }
.btn--ghost {
  background: rgba(255,255,255,0.55); color: var(--ink); border-color: rgba(14,14,16,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.btn--ghost:hover { border-color: var(--ink); background: #fff; }
.btn--bronze {
  background: linear-gradient(180deg, #D6B27C 0%, #C09454 100%);
  color: #2A1F0E;
  box-shadow: 0 6px 24px -6px var(--bronze-glow), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn--bronze:hover { transform: translateY(-1px); box-shadow: 0 14px 38px -8px var(--bronze-glow), inset 0 1px 0 rgba(255,255,255,0.4); }
/* on dark */
.btn--on-noir-ghost { background: rgba(255,255,255,0.04); color: var(--on-noir); border-color: var(--noir-line); }
.btn--on-noir-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }

/* scroll-reveal — content is ALWAYS visible (never hidden behind a
   transition/observer that throttled tabs or webmail previews won't run).
   A subtle transform-only entrance plays in real browsers; it never affects
   opacity, so content can never get stuck invisible. */
.reveal { opacity: 1; }
.reveal.in { animation: revealIn .65s cubic-bezier(.2,.7,.2,1) both; }
@keyframes revealIn { from { transform: translateY(16px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal.in { animation: none; }
  html { scroll-behavior: auto; }
}

/* hairline divider */
.rule { height: 1px; background: var(--line); border: 0; width: 100%; }

/* the dark Veda window chrome — shared */
.noir-window {
  position: relative; border-radius: var(--radius-lg); background: var(--noir); overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 40px 90px -28px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.04);
}

/* ambient bronze glow blob */
.ambient {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(201,163,107,0.32) 0%, rgba(201,163,107,0.06) 45%, rgba(0,0,0,0) 70%);
  filter: blur(8px);
}

/* live dot */
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bronze); box-shadow: 0 0 10px 1px var(--bronze-glow); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ opacity: 1; } 50%{ opacity: .45; } }

/* utility */
.tnum { font-variant-numeric: tabular-nums; }

/* user-fillable avatar hint — light, sits behind the (transparent) image-slot
   so it shows when empty and is covered once a real still is dropped */
.avatar-hint {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column;
  gap: 10px; align-items: center; justify-content: center; pointer-events: none;
  color: rgba(236,233,226,0.32); font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.16em; text-transform: uppercase; text-align: center;
}
.avatar-hint__mark { font-size: 28px; line-height: 1; opacity: 0.6; }