/* Data by Square design tokens — single source. Mirrors square.al (measured 2026-10-16). */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500&display=swap");

:root {
  color-scheme: dark;

  /* surface */
  --ink: #000000;
  --night: #0a0a1a;
  --night-2: #0d0d2b;
  --panel: #0f0f14;
  --panel-2: #15151d;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* text */
  --text: #ffffff;
  --muted: #a1a1b5;
  --faint: #6b6b80;

  /* accent (UI) */
  --violet: #8b5cf6;
  --electric: #a21cf0;
  --blue: #4f6bff;
  --violet-tint: rgba(139, 92, 246, 0.14);
  --grad-primary: linear-gradient(90deg, var(--electric) 0%, #a52ee8 100%);
  --grad-brand: linear-gradient(135deg, var(--blue) 0%, var(--violet) 55%, var(--electric) 100%);
  --glow: 0 10px 30px -8px rgba(162, 28, 240, 0.6);
  --hero-glow: radial-gradient(60% 50% at 50% 40%, rgba(110, 40, 220, 0.28) 0%, rgba(0, 0, 0, 0) 70%);
  --section-fade: linear-gradient(180deg, var(--ink) 0%, var(--night) 50%, var(--ink) 100%);

  /* sentiment (data only) */
  --pos: #34d399;
  --neu: #8a8aa0;
  --neg: #f87171;

  /* type */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --fs-h1: clamp(44px, 6vw, 76px);
  --fs-h2: clamp(34px, 4.2vw, 56px);
  --fs-h3: 20px;
  --fs-body: 18px;
  --fs-small: 14px;
  --fs-eyebrow: 14px;
  --track-h1: -0.03em;
  --track-h2: -0.03em;
  --track-eyebrow: 0.12em;

  /* shape + layout */
  --r-control: 12px;
  --r-card: 20px;
  --r-tile: 14px;
  --maxw: 1200px;
  --gutter: 24px;
  --section-y: clamp(80px, 10vw, 128px);
  --focus: 0 0 0 3px rgba(139, 92, 246, 0.55);
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-control); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}