/* ============================================================================
   Luria design system — single source of truth for tokens + fonts.
   Loaded identically on marketing (landing), onboarding, and app surfaces.
   Palette: true/near-black layered surfaces + one cold electric-blue accent.
   Type: Pixelify Sans everywhere, self-hosted.
   All fonts served from origin to satisfy CSP `font-src 'self'`.
   ============================================================================ */

/* ---- Fonts (self-hosted woff2, CSP-safe) --------------------------------- */
@import url("/fonts.css");
/* ponytail: Inter/Fraunces faces kept but unreferenced — no fetch cost, one-line revert. */
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family:"Fraunces"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/fraunces-400.woff2") format("woff2"); }
@font-face { font-family:"Fraunces"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/fraunces-600.woff2") format("woff2"); }
@font-face { font-family:"Fraunces"; font-style:normal; font-weight:900; font-display:swap; src:url("/fonts/fraunces-900.woff2") format("woff2"); }

:root {
  /* ---- Surfaces (near/true black, layered by elevation) ---- */
  --bg:            #000000;
  --surface-1:     #0A0A0B;
  --surface-2:     #141416;
  --surface-3:     #1C1C20;
  --line:          rgba(255,255,255,.08);
  --line-strong:   rgba(255,255,255,.14);

  /* ---- Text (high-contrast, opacity-stepped hierarchy) ---- */
  --text:          #FFFFFF;
  --text-2:        rgba(255,255,255,.64);
  --text-3:        rgba(255,255,255,.42);
  --text-inverse:  #000000;

  /* ---- Accent: one cold electric blue. No gradients, no glow-by-default. ---- */
  --accent:        #4C6BFF;
  --accent-hover:  #6E86FF;
  --accent-press:  #3B57E6;
  --accent-tint:   rgba(76,107,255,.12);
  --accent-line:   rgba(76,107,255,.38);
  --on-accent:     #FFFFFF;

  /* ---- Type families ---- */
  --font-display: "Pixelify Sans", ui-monospace, "SF Mono", Menlo, monospace;
  --font-body:    "Pixelify Sans", ui-monospace, "SF Mono", Menlo, monospace;
  --font-mono:    "Pixelify Sans", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Type scale (swiss: intentional, few steps) ---- */
  --fs-display:  clamp(56px, 8.2vw, 104px);
  --fs-h1:       clamp(38px, 5vw, 60px);
  --fs-h2:       clamp(28px, 3.4vw, 40px);
  --fs-h3:       24px;
  --fs-body-lg:  20px;
  --fs-body:     16px;
  --fs-sm:       14px;
  --fs-cap:      13px;
  --fs-micro:    12px;

  --lh-tight:    1.04;
  --lh-snug:     1.15;
  --lh-body:     1.6;

  --track-tight: -0.02em;
  --track-eyebrow: 0.18em;

  /* ---- Spacing (Hyros-derived scale) ---- */
  --s-1:4px; --s-2:6px; --s-3:8px; --s-4:10px; --s-5:12px; --s-6:16px;
  --s-7:18px; --s-8:20px; --s-9:24px; --s-10:32px; --s-11:40px; --s-12:48px;
  --s-13:64px; --s-14:96px; --s-15:128px; --s-16:180px;

  /* ---- Radii ---- */
  --r-1:6px; --r-2:8px; --r-3:12px; --r-4:16px; --r-5:20px; --r-6:24px; --r-pill:999px;

  /* ---- Layout ---- */
  --maxw:1200px;
  --gutter:24px;

  /* ---- Motion (ease-out only, 180–600ms, zero bounce) ---- */
  --ease:        cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:    180ms;
  --dur:         300ms;
  --dur-slow:    500ms;
  --dur-reveal:  600ms;

  /* ---- Elevation (layered shadows, not borders) ---- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.24);
  --shadow-2: 0 2px 4px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.36);
}

/* ---- Base reset / global type -------------------------------------------- */
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
/* Form controls don't inherit font-family from body — only the family, so
   size/weight stay whatever each component already set. */
button, input, select, textarea { font-family: inherit; }

h1,h2,h3,.lr-display,.lr-h1,.lr-h2 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: var(--track-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0;
}
p { text-wrap: pretty; }

.lr-display { font-size: var(--fs-display); }
.lr-h1      { font-size: var(--fs-h1); }
.lr-h2      { font-size: var(--fs-h2); line-height: var(--lh-snug); }
.lr-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

/* Numbers that update must not reflow */
.tnum { font-variant-numeric: tabular-nums; }

/* Images get a subtle 1px inset outline (pure white on dark) */
.lr-img { outline: 1px solid rgba(255,255,255,.10); outline-offset: -1px; }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition-property: background-color, color, scale, box-shadow, border-color;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease);
}
.btn:active { scale: 0.96; }
.btn-primary   { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: rgba(255,255,255,.06); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-secondary:hover { background: rgba(255,255,255,.10); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Scroll-reveal primitives (driven by motion.js) ---------------------- */
.reveal { opacity: 0; transform: translateY(18px); will-change: transform, opacity; }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
/* stagger children via inline --i index */
.reveal-stagger > * { opacity: 0; transform: translateY(16px); }
.reveal-stagger.is-in > * {
  opacity: 1; transform: none;
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
/* headline word/line reveal */
.word { display: inline-block; opacity: 0; transform: translateY(0.5em); }
.reveal-words.is-in .word {
  opacity: 1; transform: none;
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
  transition-delay: calc(var(--wi, 0) * 55ms);
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > *, .word { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn:active { scale: 1; }
  * { scroll-behavior: auto !important; }
}