src/styles/tokens.css

/* ============================================================
   FrameVis — design tokens
   "Intelligence Terminal" palette + type system.
   ============================================================ */

:root {
  /* ---------- Color: surfaces ---------- */
  --bg:            #0D0F14;
  --bg-elevated:   #11141C;
  --surface:       #161A24;
  --surface-2:     #1B202C;
  --border:        #252A38;
  --border-strong: #303749;

  /* ---------- Color: text ---------- */
  --text:          #E8EAF0;
  --text-muted:    #7A8299;
  --text-faint:    #4F576B;

  /* ---------- Color: accents ---------- */
  --accent:        #C8A96E;   /* gold — authority, press */
  --accent-soft:   #8E7949;
  --accent-dim:    rgba(200, 169, 110, 0.15);

  --danger:        #E05252;   /* high polarization / divergence */
  --danger-soft:   rgba(224, 82, 82, 0.18);

  --neutral:       #4A9E8A;   /* low divergence / agreement */
  --neutral-soft:  rgba(74, 158, 138, 0.18);

  --warning:       #D9A441;   /* mid range */

  /* ---------- Sentiment scale (timeline dots, etc.) ---------- */
  --sent-neg:      #E05252;
  --sent-mix:      #C8A96E;
  --sent-pos:      #4A9E8A;

  /* ---------- Type ---------- */
  --font-display:  "DM Serif Display", "Playfair Display", Georgia, serif;
  --font-mono:     "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular,
                   Menlo, Consolas, monospace;

  --fs-xs:    11px;
  --fs-sm:    12px;
  --fs-base:  13px;
  --fs-md:    14px;
  --fs-lg:    16px;
  --fs-xl:    20px;
  --fs-2xl:   28px;
  --fs-3xl:   40px;
  --fs-4xl:   56px;

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-base:  1.5;

  /* ---------- Spacing ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---------- Layout ---------- */
  --sidebar-w: 176px;
  --sidebar-w-collapsed: 0px;
  --topbar-h:  64px;

  /* ---------- Effects ---------- */
  --radius-sm: 2px;
  --radius:    3px;             /* sharp, not friendly */
  --radius-lg: 4px;

  --shadow-card:   0 1px 0 0 rgba(255, 255, 255, 0.02) inset,
                   0 0 0 1px var(--border);
  --shadow-modal:  0 30px 80px rgba(0, 0, 0, 0.7),
                   0 0 0 1px var(--border-strong);

  --transition:    150ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Grain texture (subtle SVG noise) ---------- */
  --grain: 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='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.06  0 0 0 0 0.08  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}