/* ============================================================
СОЦИО · Design System — Colors & Type foundations
Single source of truth for color + typography tokens.
Import this file (or copy the :root block) into any artifact.
============================================================ */
/* ---- Webfonts ------------------------------------------------
Unbounded ships locally (fonts/). Onest + JetBrains Mono load
from Google Fonts CDN — add this in the document :
-------------------------------------------------------------- */
@font-face {
font-family: 'Unbounded';
src: url('fonts/Unbounded-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Unbounded';
src: url('fonts/Unbounded-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Unbounded';
src: url('fonts/Unbounded-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* Variable font for fine weight control (200–900) */
@font-face {
font-family: 'Unbounded Variable';
src: url('fonts/Unbounded-Variable.ttf') format('truetype-variations');
font-weight: 200 900;
font-style: normal;
font-display: swap;
}
:root {
/* ============================================================
COLOR — BASE PALETTE
============================================================ */
/* Navy — text & dark surfaces (the "10–20% navy" of the page) */
--navy: #0A1430; /* primary text, dark sections */
--navy-soft: #2B3A5A; /* secondary text, sub-headings */
--navy-mute: #6A7898; /* tertiary text, captions, placeholders*/
/* Brand accents — the "5–10% accent" of the page */
--cobalt: #1746E0; /* Приоритет · focus & action */
--orange: #FF7A45; /* Потенциал · the single hero CTA */
--orange-deep: #FF6B3D; /* orange on tints / pressed CTA */
--emerald: #10B981; /* Паритет · balance & partnership */
/* Tints — soft accent washes for section backgrounds & chips */
--peach-tint: #FFEDE4; /* orange @ ~12% */
--peach: #FFD9C8; /* orange line / underline accent */
--sky-tint: #E8EEFF; /* cobalt @ ~10% */
--sky: #C9D6FF; /* cobalt line */
--mint-tint: #E3F3EC; /* emerald @ ~12% */
--mint: #A8D9C4; /* emerald line */
/* Surfaces — the "70–80% light" of the page */
--paper: #F1F4F9; /* app/page background */
--paper-pure: #FAFBFD; /* raised cards on paper */
--cream: #F6F2EC; /* warm alt section background */
--white: #FFFFFF; /* pure surfaces, inputs */
/* Lines & hairlines */
--line: #DCE3EE; /* default borders, dividers, inputs */
--line-soft: #E8EDF4; /* subtle dividers */
/* Semantic */
--success: #10B981;
--warning: #F59E0B;
--danger: #EF4444;
/* Focus ring (orange) */
--ring: rgba(255, 122, 69, .12);
/* ============================================================
ORGANISATION COLOR ROTATION
Same П-mark, three colors fixed — TOP bar = org color.
============================================================ */
--socio-top: var(--cobalt); --socio-left: var(--orange); --socio-right: var(--emerald);
--potential-top:var(--orange); --potential-left:var(--emerald); --potential-right:var(--cobalt);
--prioritet-top:var(--cobalt); --prioritet-left:var(--emerald); --prioritet-right:var(--orange);
--paritet-top: var(--emerald); --paritet-left: var(--cobalt); --paritet-right: var(--orange);
/* ============================================================
TYPOGRAPHY — FONT FAMILIES
============================================================ */
--font-display: 'Unbounded', system-ui, sans-serif; /* headings 600–700 */
--font-body: 'Onest', system-ui, sans-serif; /* body 400–600 */
--font-mono: 'JetBrains Mono', ui-monospace, monospace;/* labels, [ 01 ] */
/* ============================================================
TYPE SCALE (display = Unbounded, tight tracking)
============================================================ */
--fs-display: 64px; --lh-display: 1.04; --tr-display: -0.04em;
--fs-h1: 48px; --lh-h1: 1.06; --tr-h1: -0.035em;
--fs-h2: 36px; --lh-h2: 1.10; --tr-h2: -0.03em;
--fs-h3: 26px; --lh-h3: 1.18; --tr-h3: -0.025em;
--fs-h4: 20px; --lh-h4: 1.25; --tr-h4: -0.02em;
--fs-body-lg: 18px; --lh-body-lg: 1.6;
--fs-body: 16px; --lh-body: 1.6;
--fs-small: 14px; --lh-small: 1.55;
--fs-mono: 12px; --lh-mono: 1.4; --tr-mono: 0.10em;
/* ============================================================
RADII
============================================================ */
--radius-sm: 12px; /* inputs, chips, small cards */
--radius-md: 20px; /* cards */
--radius-lg: 32px; /* hero cards, large panels */
--radius-pill: 999px; /* buttons, tags */
/* ============================================================
SPACING SCALE (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; --space-16: 64px; --space-20: 80px; --space-24: 96px;
/* ============================================================
ELEVATION — soft, never heavy. No glossy/3D shadows.
============================================================ */
--shadow-sm: 0 1px 2px rgba(10, 20, 48, .04);
--shadow-md: 0 6px 20px rgba(10, 20, 48, .06);
--shadow-lg: 0 16px 44px rgba(10, 20, 48, .08);
--shadow-cta: 0 8px 22px rgba(255, 122, 69, .26); /* under hero CTA */
}
/* ============================================================
SEMANTIC TYPE CLASSES — drop-in helpers
============================================================ */
.display, h1.display {
font-family: var(--font-display); font-weight: 700;
font-size: var(--fs-display); line-height: var(--lh-display);
letter-spacing: var(--tr-display); color: var(--navy);
}
.h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); color: var(--navy); }
.h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); color: var(--navy); }
.h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); color: var(--navy); }
.h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); color: var(--navy); }
.body-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--navy-soft); }
.body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--navy-soft); }
.small { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--navy-mute); }
/* Mono label — the signature bracket-numbering device: [ 01 ] */
.mono, .eyebrow {
font-family: var(--font-mono); font-weight: 500;
font-size: var(--fs-mono); line-height: var(--lh-mono);
letter-spacing: var(--tr-mono); text-transform: uppercase;
color: var(--navy-mute);
}
/* Signature accent: Unbounded italic, orange, peach underline.
Use on 1–2 key words only. */
.accent {
font-family: var(--font-display); font-style: italic; font-weight: 600;
color: var(--orange);
background-image: linear-gradient(var(--peach), var(--peach));
background-repeat: no-repeat;
background-position: 0 92%;
background-size: 100% 0.30em;
padding: 0 .02em;
}