/* TrailSight design tokens — shared across all public pages.
   Loaded BEFORE _components.css and any page-specific stylesheet. */

:root {
  /* ---------- Color ---------- */
  --ts-accent: #F26419;
  --ts-accent-2: #FF7A33;
  --ts-accent-soft: rgba(242, 100, 25, 0.08);
  --ts-accent-line: rgba(242, 100, 25, 0.30);

  --ts-ink: #0a0a0a;
  --ts-ink-2: #141414;
  --ts-ink-3: #1a1a1a;
  --ts-ink-4: #222;

  --ts-paper: #ffffff;
  --ts-paper-2: #fafafa;
  --ts-paper-3: #FBFAF7;

  --ts-line: #eeeeee;
  --ts-line-2: rgba(10, 10, 10, 0.08);
  --ts-line-3: rgba(10, 10, 10, 0.12);

  --ts-muted: #888888;
  --ts-muted-2: #a0a0a0;
  --ts-muted-3: #6a6a6a;
  --ts-body: #5a5a5a;

  /* ---------- Typography ---------- */
  --ts-font-display: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ts-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Spacing (4/8 base) ---------- */
  --ts-s1: 4px;
  --ts-s2: 8px;
  --ts-s3: 12px;
  --ts-s4: 16px;
  --ts-s6: 24px;
  --ts-s8: 32px;
  --ts-s12: 48px;
  --ts-s18: 72px;
  --ts-s24: 96px;
  --ts-s32: 128px;

  /* ---------- Radius ---------- */
  --ts-r-sm: 6px;
  --ts-r: 12px;
  --ts-r-md: 16px;
  --ts-r-lg: 20px;
  --ts-r-xl: 28px;
  --ts-r-pill: 999px;

  /* ---------- Shadow ---------- */
  --ts-shadow-card: 0 1px 2px rgba(26, 26, 26, 0.03), 0 8px 18px -8px rgba(26, 26, 26, 0.06);
  --ts-shadow-card-hover: 0 12px 28px -12px rgba(26, 26, 26, 0.18);
  --ts-shadow-pill: 0 10px 24px -8px rgba(242, 100, 25, 0.45);

  /* ---------- Layout ---------- */
  --ts-container: 1440px;
  --ts-container-narrow: 1200px;

  /* Breakpoint convention (used in @media; CSS does not allow var() in @media):
     560 / 768 / 1024 / 1280 */
}