/* TrendStack shared design system.
 * Single source of truth for design tokens and the primitives every page uses.
 * Loaded before each page's own <style>, so a page can still override.
 * Generated by scripts/extract-shared-css.js
 */

:root{
  --bg: #06060C;
  --surface: #12121E;
  --surface-raised: #1A1A2A;
  --border: #26263A;
  --border-hi: #3A3A54;
  --accent: #FF3B7F;
  --accent-2: #FF6B9D;
  --accent-dim: #FF3B7F26;
  --cyan: #22D3EE;
  --violet: #A78BFA;
  --live: #34D399;
  --red: #EF4444;
  --amber: #F59E0B;
  --text: #F5F5FA;
  --muted: #8C8CA1;
}

html,body{ background:var(--bg);color:var(--text);font-family:'Inter',sans-serif; }
.font-display{ font-family:'Space Grotesk',sans-serif; }
.font-mono{ font-family:'JetBrains Mono',monospace; }
.app{ position:relative;z-index:2; }
.content{ position:relative;z-index:2; }
.ambient{ position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden; }
.grain{ position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0.035;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%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)'/%3E%3C/svg%3E"); }
.glass{ background:linear-gradient(180deg,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.015) 100%),var(--surface);border:1px solid var(--border-hi);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 30px 60px -20px rgba(0,0,0,0.7);backdrop-filter:blur(20px); }
.nav-link{ color:var(--muted);transition:color .15s ease;text-decoration:none; }
.nav-link:hover{ color:var(--text); }
.nav-link.current{ color:var(--accent); }
.field{ background:var(--surface);border:1px solid var(--border);color:var(--text);transition:border-color .15s ease,box-shadow .15s ease; }
.field:focus{ outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,211,238,0.15); }
.loading-pulse{ animation:pulse 1.5s ease-in-out infinite; }
a.link{ color:var(--cyan);text-decoration:none; }
a.link:hover{ text-decoration:underline; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--cyan);outline-offset:2px; }
.btn-3d:disabled{ opacity:0.6;pointer-events:none; }