/* ============================================================================
msg-collector — Design Tokens
Modern developer-tool / data-platform aesthetic. Light. Blue accent.
Geist (sans) + Geist Mono (data). Balanced density.
Load Geist from Google Fonts in the BEFORE this file:
Icons: Lucide (https://unpkg.com/lucide@latest) — see README ICONOGRAPHY.
============================================================================ */
:root {
/* ---- Brand / primary scale (blue) ------------------------------------ */
--blue-50: #eff6ff;
--blue-100: #dbeafe;
--blue-200: #bfdbfe;
--blue-300: #93c5fd;
--blue-400: #60a5fa;
--blue-500: #3b82f6;
--blue-600: #2563eb; /* PRIMARY */
--blue-700: #1d4ed8;
--blue-800: #1e40af;
--blue-900: #1e3a8a;
--blue-950: #172554;
/* ---- Neutral scale (cool-neutral / zinc) ----------------------------- */
--neutral-0: #ffffff;
--neutral-50: #fafafa;
--neutral-100: #f4f4f5;
--neutral-200: #e4e4e7;
--neutral-300: #d4d4d8;
--neutral-400: #a1a1aa;
--neutral-500: #71717a;
--neutral-600: #52525b;
--neutral-700: #3f3f46;
--neutral-800: #27272a;
--neutral-900: #18181b;
--neutral-950: #09090b;
/* ---- Status scales ---------------------------------------------------- */
/* success (green) */
--success-bg: #f0fdf4;
--success-border: #bbf7d0;
--success-fg: #15803d;
--success-solid: #16a34a;
/* warning (amber) */
--warning-bg: #fffbeb;
--warning-border: #fde68a;
--warning-fg: #b45309;
--warning-solid: #d97706;
/* danger (red) */
--danger-bg: #fef2f2;
--danger-border: #fecaca;
--danger-fg: #b91c1c;
--danger-solid: #dc2626;
/* info (blue) */
--info-bg: #eff6ff;
--info-border: #bfdbfe;
--info-fg: #1d4ed8;
--info-solid: #2563eb;
/* neutral / secondary */
--neutral-bg: #f4f4f5;
--neutral-tag-fg: #52525b;
/* ---- Platform brand colors (meaningful, used in badges) --------------- */
--telegram: #229ed9;
--telegram-bg: #e7f5fb;
--whatsapp: #25d366;
--whatsapp-bg: #e7faee;
/* ---- Semantic surfaces (light theme) --------------------------------- */
--canvas: var(--neutral-50); /* app background behind panels */
--surface: var(--neutral-0); /* cards, tables, panels */
--surface-subtle:var(--neutral-50); /* table header, zebra, inset */
--surface-hover: var(--neutral-100); /* row / item hover */
--surface-sunken:var(--neutral-100); /* wells, code blocks */
/* sidebar — a near-black panel, the one dark surface in the light app */
--sidebar: #101013;
--sidebar-fg: rgba(255,255,255,0.72);
--sidebar-fg-dim: rgba(255,255,255,0.40);
--sidebar-active-bg: rgba(255,255,255,0.07);
--sidebar-border: rgba(255,255,255,0.08);
/* ---- Borders ---------------------------------------------------------- */
--border: var(--neutral-200); /* default hairline */
--border-strong: var(--neutral-300); /* inputs, emphasis */
--border-subtle: var(--neutral-100); /* internal dividers */
/* ---- Foreground / text ------------------------------------------------ */
--fg: var(--neutral-900); /* primary text, headings */
--fg-muted: var(--neutral-600); /* secondary text */
--fg-subtle: var(--neutral-500); /* tertiary, meta */
--fg-faint: var(--neutral-400); /* placeholder, disabled */
--fg-on-primary: #ffffff;
/* ---- Primary semantic ------------------------------------------------- */
--primary: var(--blue-600);
--primary-hover: var(--blue-700);
--primary-active: var(--blue-800);
--primary-fg: #ffffff;
--primary-subtle-bg: var(--blue-50);
--primary-subtle-fg: var(--blue-700);
--link: var(--blue-600);
/* ---- Focus ring ------------------------------------------------------- */
--ring: 0 0 0 3px rgba(37, 99, 235, 0.18);
/* ---- Typography ------------------------------------------------------- */
--font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-mono: "Geist Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
/* font sizes (balanced density — 14px base) */
--text-xs: 12px;
--text-sm: 13px;
--text-base: 14px;
--text-md: 15px;
--text-lg: 16px;
--text-xl: 18px;
--text-2xl: 20px;
--text-3xl: 24px;
--text-4xl: 30px;
--text-5xl: 38px;
--leading-tight: 1.2;
--leading-snug: 1.35;
--leading-normal: 1.5;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--tracking-wide: 0.04em;
--tracking-wider: 0.08em; /* uppercase eyebrows / table headers */
/* ---- Radii ------------------------------------------------------------ */
--radius-xs: 4px;
--radius-sm: 6px; /* buttons, inputs, badges */
--radius-md: 8px; /* cards, menus */
--radius-lg: 10px; /* large panels */
--radius-xl: 14px;
--radius-full: 9999px;
/* ---- Spacing (4px base) ---------------------------------------------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
/* ---- Elevation (very restrained — borders do most of the work) ------- */
--shadow-xs: 0 1px 2px rgba(16, 16, 19, 0.04);
--shadow-sm: 0 1px 2px rgba(16, 16, 19, 0.06), 0 1px 1px rgba(16, 16, 19, 0.04);
--shadow-md: 0 4px 12px rgba(16, 16, 19, 0.08), 0 1px 3px rgba(16, 16, 19, 0.05);
--shadow-lg: 0 12px 32px rgba(16, 16, 19, 0.12), 0 2px 8px rgba(16, 16, 19, 0.06);
--shadow-pop: 0 6px 20px rgba(16, 16, 19, 0.14);
}
/* ============================================================================
Semantic element styles — opt-in via .ds-prose or use the vars directly.
These document the intended scale; UI kits mostly use utility-ish classes.
============================================================================ */
.ds-display {
font-family: var(--font-sans);
font-size: var(--text-4xl);
line-height: var(--leading-tight);
font-weight: var(--weight-bold);
letter-spacing: -0.02em;
color: var(--fg);
}
.ds-h1 {
font-family: var(--font-sans);
font-size: var(--text-3xl);
line-height: var(--leading-tight);
font-weight: var(--weight-semibold);
letter-spacing: -0.015em;
color: var(--fg);
}
.ds-h2 {
font-family: var(--font-sans);
font-size: var(--text-2xl);
line-height: var(--leading-snug);
font-weight: var(--weight-semibold);
letter-spacing: -0.01em;
color: var(--fg);
}
.ds-h3 {
font-family: var(--font-sans);
font-size: var(--text-lg);
line-height: var(--leading-snug);
font-weight: var(--weight-semibold);
color: var(--fg);
}
.ds-body {
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-normal);
font-weight: var(--weight-regular);
color: var(--fg);
}
.ds-small {
font-family: var(--font-sans);
font-size: var(--text-sm);
line-height: var(--leading-normal);
color: var(--fg-muted);
}
.ds-eyebrow {
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--fg-subtle);
}
.ds-mono {
font-family: var(--font-mono);
font-size: var(--text-sm);
font-feature-settings: "tnum" 1, "zero" 1;
color: var(--fg);
}