/* ═══════════════════════════════════════════════════════════════ Call Score — additive design tokens Builds on top of tokens.css; never duplicates base variables. ═══════════════════════════════════════════════════════════════ */ /* ── Fonts ──────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap'); :root { --cs-font-mono: 'IBM Plex Mono', 'Roboto Mono', ui-monospace, monospace; /* ═══════════════════════════════════════════════════════════ CALL SCORE — STANDARD COLOR GUIDE Teal-based palette. No blue (#1E90FF) or purple (#1A3FA0). ═══════════════════════════════════════════════════════════ */ /* ── Core palette ───────────────────────────────────────── */ --cs-accent: #0F6B62; /* teal — primary CTA, active states */ --cs-accent-hover: #0B574F; /* teal dark — button hover */ --cs-accent-bg: #D2F0E4; /* teal tint — active nav bg, highlights */ /* ── Surfaces ───────────────────────────────────────────── */ --cs-page-bg: #F3F5F7; /* page background */ --cs-card: #FFFFFF; /* card / panel background */ --cs-sidebar: #145C4A; /* sidebar background — bright forest green */ --cs-sidebar-hover: rgba(255,255,255,0.08); /* ── Text ───────────────────────────────────────────────── */ --cs-text: #1B2430; /* primary text */ --cs-muted: #5B6B79; /* secondary / hint text */ /* ── Borders ────────────────────────────────────────────── */ --cs-border: #D8DEE3; /* card borders, dividers */ --cs-border-strong:#B9C2C9; /* hover borders */ /* ── Score tiers ────────────────────────────────────────── */ /* Good: score 4-5 | Mid: score 3 | Low: score 1-2 */ --cs-good: #0F6B62; --cs-good-bg: #D2F0E4; --cs-mid: #D98E04; --cs-mid-bg: #F8E6C8; --cs-low: #C4573A; --cs-low-bg: #F8E0D9; /* ── Progress bar ───────────────────────────────────────── */ --cs-progress-bg: var(--cs-border); --cs-progress-fill: var(--cs-accent); --cs-progress-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ── Native