/* CommerCentr — Design Tokens (single source of truth) */
/* Шрифти НЕ через @import (пізнє виявлення + render-blocking waterfall) — їх
вантажить + preconnect у layout.tpl (паралельно). */
:root {
/* ── Primary / brand ─────────────────────── */
--cc-lime: #C8FF00;
--primary-100: #A8D907;
--primary-120: #9BC91E;
--primary-50: #BFD944;
--olive-70: #729100;
--olive-80: #485C00;
--olive-90: #324000;
--olive-100: #253000;
--accent: #A8D907;
/* ── Neutrals ─────────────────────────────── */
--gray-100: #030404;
--gray-85: #101515;
--gray-80: #1D252B;
--gray-70: #273035;
--gray-60: #3B4853;
--gray-50: #4E5F6E;
--gray-40: #77848F;
--gray-30: #A3B1BC;
--gray-20: #C5CED7;
--gray-10: #E8ECF2;
--gray-0: #FFFFFF;
/* Page semantics */
--bg-page: var(--gray-100);
--bg-surface: var(--gray-80);
--bg-elevated: var(--gray-70);
--border-hairline:var(--gray-60);
--fg-primary: var(--gray-10);
--fg-secondary: var(--gray-20);
--fg-muted: var(--gray-40);
--fg-faint: var(--gray-50);
/* ── Semantic ─────────────────────────────── */
--success: #187D19;
--success-fg: #2bb04a;
--success-light: rgba(24,125,25,.14);
--warning: #E6B800;
--warning-light: rgba(230,184,0,.16);
--error: #E53935;
--error-light: rgba(229,57,53,.14);
--info: #0066CC;
--info-fg: #4dabff;
--info-light: rgba(0,102,204,.16);
--accent-light: rgba(168,217,7,.16);
/* ── Type ─────────────────────────────────── */
--font-primary: 'Inter','IBM Plex Sans',sans-serif;
--font-mono: 'IBM Plex Mono',monospace;
--font-display: 'Tektur','Inter',sans-serif;
/* ── Radii ────────────────────────────────── */
--radius: 4px;
--radius-lg: 8px;
--radius-pill: 9999px;
/* ── Shadows ──────────────────────────────── */
--shadow: 0 2px 12px rgba(0,0,0,.18);
--shadow-lg: 0 8px 32px rgba(0,0,0,.28);
--focus-glow: 0 0 0 3px rgba(168,217,7,.12);
--shadow-glow-lime: var(--focus-glow);
/* ── Spacing scale ────────────────────────── */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px; --sp-9: 64px;
/* ── Layout ───────────────────────────────── */
--sidebar-w: 240px;
--sidebar-collapsed-w: 64px;
--topbar-h: 64px;
--footer-h: 44px;
--container-max: 1440px;
/* ── Motion ───────────────────────────────── */
--t-fast: 0.18s ease;
--t-base: 0.18s ease;
--transition: 0.18s ease;
}
/* ── Base reset / type ─────────────────────── */
*,*::before,*::after { box-sizing: border-box; }
html,body { margin:0; padding:0; }
body {
background: var(--bg-page);
color: var(--fg-primary);
font-family: var(--font-primary);
font-size: 14px;
line-height: 1.45;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--primary-50); }
::selection { background: var(--accent); color: var(--gray-100); }
h1,h2,h3,h4,h5 { color: var(--gray-0); font-weight: 700; margin: 0; }
h1 { font-size: 22px; letter-spacing: -.01em; }
h2 { font-size: 18px; }
h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); font-weight: 600; }
small,.eyebrow { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); font-weight: 600; }
.mono { font-family: var(--font-mono); }
/* hidden scrollbar utility used inside dense cards */
.scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-thin::-webkit-scrollbar-thumb { background: var(--gray-60); border-radius: 3px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }
/* ── Airy currency mark (inline sprite