/* Labs design DNA. Shared by every Startle and Harper concept. Lead-owned: builders import it, don't edit it.
   Lineage: Clinica Studio (one scene, dark alive sky, hyperreal hero objects, paper-white is the brightest thing)
   + coding-playbook ESSENTIALS motion tokens. Each concept adds ONE accent of its own on top. */
:root {
  color-scheme: dark;

  /* Surfaces. The stage is near-black, warm-neutral, never pure #000 except for dips. */
  --sky-0: #07080a;
  --sky-1: #0c0d10;
  --sky-2: #13151a;
  --ink: #16171a;
  --paper: #faf8f3;
  --fg: #eef1f5;
  --fg-2: rgba(238, 241, 245, 0.62);
  --fg-3: rgba(238, 241, 245, 0.38);
  --hair: rgba(255, 255, 255, 0.08);
  --hair-2: rgba(255, 255, 255, 0.14);

  /* Glass: the pill nav, chips, and the prompt shell. Lit edge on top, soft inner shadow. */
  --glass-bg: rgba(22, 24, 29, 0.56);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  --glass-blur: blur(22px) saturate(1.35);
  --shadow-float: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 10px 24px -12px rgba(0, 0, 0, 0.55);
  --shadow-paper: 0 20px 50px rgba(0, 0, 0, 0.35);

  /* Category accents from Studio. Pick ONE per concept as --accent; don't rainbow. */
  --c-cyan: #4fc8e8;
  --c-violet: #8b72ff;
  --c-lime: #9bd84a;
  --c-amber: #f0a640;
  --c-teal: #5ee6d0;
  --c-coral: #ff6b6b;
  --accent: var(--c-teal);

  --radius-card: 14px;
  --radius-glass: 22px;
  --radius-pill: 999px;

  --font-inter: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
  --font-jetbrains: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-sans: var(--font-inter);
  --font-mono: var(--font-jetbrains);
  --font-fraunces: "Fraunces", ui-serif, Georgia, serif;
  /* Large designed titles: tight tracking, light weight at display sizes. */
  --title-xl: 300 clamp(44px, 6.4vw, 104px) / 0.95 var(--font-sans);
  --title-l: 400 clamp(28px, 3.2vw, 48px) / 1.02 var(--font-sans);
  --label: 500 11px / 1.2 var(--font-mono);

  /* Motion tokens (ESSENTIALS). Spend these everywhere; no stray literals. */
  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-scene: 720ms;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.9, 0.1, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --stagger-tight: 20ms;
  --stagger-base: 45ms;
  --stagger-loose: 90ms;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--sky-0);
  color: var(--fg);
  font: 400 15px/1.45 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, textarea { font: inherit; color: inherit; }
::selection { background: color-mix(in oklab, var(--accent) 40%, transparent); }

/* The glass pill (Studio's top-centre nav vocabulary). */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--shadow-float);
  border-radius: var(--radius-glass);
}
.label { font: var(--label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }

/* Grain: the quiet "alive" layer. Put <div class="grain"></div> once at the end of <body>. */
.grain {
  position: fixed; inset: -50%; pointer-events: none; z-index: 9999; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .grain { animation: none; }
}