/* ===================================================================== 59 ОШБр БпС — «Степові хижаки» / Steppe Predators Brand design tokens. Reference the variables — never hardcode hexes. Dark-first, tactical. All fonts ship full Cyrillic. ===================================================================== */ /* Web fonts load via in index.html (non-blocking, trimmed weights) */ :root { color-scheme: dark; /* ---- Wordmark (назва бренду) ---- */ --font-wordmark: "Tektur", "Oswald", system-ui, sans-serif; /* ---- Core surfaces (dark-first) ---- */ --c-void: #050505; /* page background — confirmed brand theme-color */ --c-surface: #0E0F0C; /* cards, panels */ --c-surface-2: #16180F; /* raised / hovered surface, inputs */ --c-surface-3: #1F2117; /* highest elevation, popovers */ --c-hairline: #2B2D22; /* borders, dividers, grid lines */ --c-hairline-2: #3A3C2E; /* stronger borders, focus rings base */ /* ---- Text ---- */ --c-text: #F2F1E6; /* bone white — primary text */ --c-text-muted: #A9AA98; /* secondary text, labels (khaki-gray) */ --c-text-faint: #83846F; /* captions, disabled, placeholder (WCAG AA ≥4.5:1 on void) */ /* ---- Brand colors ---- */ --c-steppe: #C8A23C; /* steppe gold — PRIMARY accent */ --c-steppe-hi: #E2BC54; /* brighter gold for hover / highlights */ --c-olive: #6F7A4B; /* camo olive — SECONDARY */ --c-olive-hi: #8B9760; /* lifted olive */ /* ---- Status / semantic ---- */ --c-active: #7FB23A; --c-standby: #C8A23C; --c-critical: #D2402E; --c-info: #5E96B5; /* ---- Categorical (Бойові/Тилові/Медичні/розвідка/РЕБ) ---- */ --c-cat-combat: #D2402E; --c-cat-logi: #C8A23C; --c-cat-med: #5E96B5; --c-cat-recon: #6F7A4B; --c-cat-ew: #8E6FB0; /* ---- Typography ---- */ --font-display: "Oswald", "Arial Narrow", system-ui, sans-serif; --font-body: "Manrope", system-ui, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; /* ---- Type scale ---- */ --fs-display: clamp(2.4rem, 5vw, 4rem); --fs-h1: 2rem; --fs-h2: 1.5rem; --fs-h3: 1.15rem; --fs-body: 1rem; --fs-small: 0.8125rem; --fs-mono-kpi: clamp(1.75rem, 4vw, 2.75rem); --tracking-display: 0.06em; --tracking-label: 0.14em; /* ---- Radius / geometry ---- */ --radius: 4px; --radius-lg: 6px; --clip-corner: 10px; /* ---- Shadow / glow ---- */ --shadow: 0 10px 30px rgba(0,0,0,0.55); --glow-steppe: 0 0 0 1px rgba(200,162,60,0.35), 0 0 18px rgba(200,162,60,0.18); } /* ---- Base resets ---- */ .s59-root { background: var(--c-void); color: var(--c-text); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; } .s59-root h1, .s59-root h2, .s59-root h3, .s59-display { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); font-weight: 600; line-height: 1.05; } .s59-label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--fs-small); color: var(--c-text-muted); } .s59-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .s59-panel-clip { clip-path: polygon( var(--clip-corner) 0, 100% 0, 100% calc(100% - var(--clip-corner)), calc(100% - var(--clip-corner)) 100%, 0 100%, 0 var(--clip-corner) ); }