Upload 6270 files

4083225 verified 6 months ago

2.78 kB

/* ============================================================
   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>");
}

	/* ============================================================
	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>");
	}