/* design-tokens.css — single source of truth for design tokens. * * Spec: docs/design-system-source.md (sections 1.1-1.11). * Source of truth: app/static/css/counselor-app.css (counselor PWA — first * place where the system was applied; admin shell is being aligned with it * in Sprint 5). * * Two themes: * default (light) — :root * dark (data-bs-theme=dark) — [data-bs-theme="dark"] * * The counselor PWA toggles the dark/light theme via `body.light` (legacy); * admin shell uses Bootstrap's `data-bs-theme` attribute on . We keep * both selectors so Phase B agents and the existing counselor PWA stay * consistent during the transition. * * NEVER add page-specific tokens here. Components live in components.css; * page-specific styles live in their own per-page CSS file. */ /* ─── Type scale ──────────────────────────────────────────────────────── * Counselor rule: 6 sizes instead of 11, nothing smaller than 11px on * mobile. Source: counselor-app.css:2-20. * ──────────────────────────────────────────────────────────────────── */ :root { /* Font families */ --font-base: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; /* Type scale — 6 steps */ --fs-micro: 11px; /* uppercase section labels, time stamps, badges */ --fs-caption: 12px; /* secondary text: muted captions, meta */ --fs-body: 13px; /* card body text */ --fs-primary: 14px; /* names, buttons, inputs (admin baseline) */ --fs-title: 18px; /* app-level titles */ --fs-kpi: 24px; /* KPI numbers */ /* Extra admin-only sizes (kept narrow on purpose) */ --fs-page-title: 20px; /* admin page header */ --fs-h1: 28px; /* hero numbers / dashboards */ --fs-h2: 32px; /* full-bleed callouts */ --fs-tiny: 10px; /* dense table chrome (admin tables only) */ --fs-15: 15px; /* sidebar logo etc. */ /* Font weights */ --fw-normal: 500; /* readable body */ --fw-medium: 600; /* accent */ --fw-bold: 700; /* buttons, labels */ --fw-black: 800; /* large headings only */ /* Letter-spacing for uppercase labels */ --ls-label: 0.065em; } /* ─── Color tokens — light (default) ─────────────────────────────────── * Slightly different from the counselor `body.light` palette: admin shell * defaults to `#f8f9fb` page bg with white surfaces, while counselor's * mobile-first light theme uses `#e0e7ff` background. Both share the same * accent + semantic colors. Light tokens roughly match the existing admin * palette (extracted from base.html lines 64-94) so we don't visually * regress the admin pages while the migration is in flight. * ──────────────────────────────────────────────────────────────────── */ :root { /* Surfaces */ --bg: #f8f9fb; --surface: #ffffff; --surface2: #f3f4f6; --border: #e8eaef; /* Text */ --text: #1a1d26; --muted: #8b919e; /* Brand & semantic */ --accent: #6366f1; /* indigo-500 */ --accent-dim: rgba(99, 102, 241, 0.10); --green: #10b981; --green-dim: rgba(16, 185, 129, 0.10); --yellow: #f59e0b; --yellow-dim: rgba(245, 158, 11, 0.10); --red: #ef4444; --red-dim: rgba(239, 68, 68, 0.10); --blue: #3b82f6; --blue-dim: rgba(59, 130, 246, 0.10); --purple: #a855f7; --purple-dim: rgba(168, 85, 247, 0.10); --teal: #14b8a6; --teal-dim: rgba(20, 184, 166, 0.10); --orange: #f97316; --orange-dim: rgba(249, 115, 22, 0.10); /* Forms */ --input-bg: #f3f4f6; /* Elevation */ --shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.06); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10); /* Radii */ --radius-sm: 6px; --radius: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 16px; --radius-2xl: 18px; /* Layout */ --sidebar-width: 224px; --topbar-height: 54px; /* Easing & timing */ --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* counselor swipes */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* most transitions */ --ease-in-out: ease-in-out; --d-fast: 0.15s; --d-normal: 0.25s; --d-slow: 0.4s; /* Bootstrap variable bridges → our tokens * Bootstrap 5.3 reads --bs-* CSS vars at runtime; bridging here means we * don't have to override per-component. Keep this list narrow — adding a * bridge here can cascade unexpectedly through Bootstrap internals. */ --bs-body-bg: var(--surface); --bs-body-color: var(--text); --bs-border-color: var(--border); --bs-secondary-color: var(--muted); --bs-tertiary-bg: var(--surface2); --bs-secondary-bg: var(--surface2); } /* ─── Color tokens — dark ─────────────────────────────────────────────── * Source: counselor-app.css:22-46 (verbatim). * Triggered by Bootstrap data-bs-theme attr; admin uses this. Counselor * PWA uses body.light selector (inverted default — see counselor-app.css). * ──────────────────────────────────────────────────────────────────── */ [data-bs-theme="dark"] { /* Surfaces */ --bg: #0b0f1a; --surface: #111827; --surface2: #1a2236; --border: #1f2d45; /* Text */ --text: #e2e8f0; --muted: #4a5568; /* Brand & semantic — accent stays the same; *-dim increases opacity for legibility on dark */ --accent-dim: rgba(99, 102, 241, 0.15); --green-dim: rgba(16, 185, 129, 0.12); --yellow-dim: rgba(245, 158, 11, 0.12); --red-dim: rgba(239, 68, 68, 0.12); --blue-dim: rgba(59, 130, 246, 0.12); --purple-dim: rgba(168, 85, 247, 0.12); --teal-dim: rgba(20, 184, 166, 0.12); --orange-dim: rgba(249, 115, 22, 0.12); /* Forms */ --input-bg: #0e1420; /* Elevation — stronger shadows on dark */ --shadow: 0 4px 24px rgba(0, 0, 0, 0.35); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.50); /* Bootstrap bridges (re-bridged to dark tokens) */ --bs-body-bg: var(--surface); --bs-body-color: var(--text); --bs-border-color: var(--border); --bs-secondary-color: var(--muted); --bs-tertiary-bg: var(--surface2); --bs-secondary-bg: var(--surface2); } /* ─── Body baseline ───────────────────────────────────────────────────── * Manrope @ 14px, smooth scroll-gutter. Kept lightweight — anything more * specific should live in critical-admin.css or per-page CSS. */ body { font-family: var(--font-base); font-size: var(--fs-primary); scrollbar-gutter: stable; /* iOS rubber-band: пользователь свайпает страницу пальцем — body «оттягивается» и показывает контрастный фон под собой. Запрещаем overscroll и фиксируем фон body цветом канваса (--bg), чтобы любые pull-эффекты не выглядели как «фон скользит». */ background: var(--bg); overscroll-behavior: none; -webkit-overflow-scrolling: touch; } html { scrollbar-gutter: stable; background: var(--bg); overscroll-behavior: none; /* Fix 2026-05-13: тёмная тема — иначе scrollbar светлый. WebKit/Safari иначе использует system scrollbars (light); Firefox использует scrollbar-color. Привязка к [data-bs-theme] ниже. */ color-scheme: light; } [data-bs-theme="dark"] { color-scheme: dark; } /* ─── Global scrollbar (counselor-style, unified) ────────────────────── * Source: counselor-app.css:822-825. * Fix 2026-05-13: добавлен scrollbar-color для Firefox (Firefox игнорирует * ::-webkit-scrollbar). thumb=--border, track=transparent. */ html { scrollbar-color: var(--border) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); } /* ─── Utilities ─────────────────────────────────────────────────────── */ .mono { font-family: var(--font-mono); } .gender-m { color: var(--blue); } .gender-f { color: var(--purple); }