/* Floor design tokens — shared base (Geist, surfaces, accent, grain).
   Extracted from the taste-skill redesign system. */
@font-face {
  font-family: 'Geist';
  src: url('/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --bg: #0b0e13;
  --bg-2: #0e1218;
  --panel: #131922;
  --panel-2: #1a2230;
  --panel-3: #212b3a;
  --border: #222c3a;
  --border-strong: #2f3d4e;

  --text: #e9eff7;
  --muted: #8a98aa;
  --faint: #5c6b7d;

  --accent: #5b8cff;
  --accent-2: #7aa2ff;
  --accent-ink: #08111f;
  --accent-soft: rgba(91, 140, 255, 0.12);
  --accent-line: rgba(91, 140, 255, 0.32);

  --green: #35d39a;
  --red: #f76d68;
  --amber: #e3b341;
  --bid: #35d39a;
  --ask: #f76d68;

  --shadow-sm: 0 1px 2px rgba(4, 8, 14, 0.4);
  --shadow: 0 10px 34px -12px rgba(4, 9, 18, 0.7);
  --shadow-lg: 0 28px 60px -24px rgba(3, 8, 16, 0.85);

  --r-sm: 8px; --r: 14px; --r-lg: 20px; --r-xl: 28px;

  --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --maxw: 1100px;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
  letter-spacing: -0.011em;
  position: relative;
  min-height: 100dvh;
}
body::before { /* film grain */
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
body::after { /* ambient wash fallback (shadergradient island overlays this) */
  content: '';
  position: fixed; top: 0; left: 0; right: 0; height: 480px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 360px at 20% -8%, rgba(91, 140, 255, 0.14), transparent 60%),
    radial-gradient(700px 320px at 88% -12%, rgba(53, 211, 154, 0.08), transparent 62%);
}
#shader-bg {
  position: fixed; top: 0; left: 0; right: 0; height: 560px; z-index: 0; pointer-events: none;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 100%);
}
#shader-bg canvas { display: block; width: 100% !important; height: 100% !important; }
body:has(#shader-bg[data-fx='on'])::after { opacity: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.025em; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}