/* ============================================================ Вчасно — Design System Tokens (single source of truth) Theme: Light primary, with dark (Ink) sections. Vibe: Between clean minimalism and modern techno-SaaS — high contrast, big headings, generous whitespace. Shape: Strongly rounded (matches the logo plaque). Fonts: Geologica (display/headings) + Geist (body). Google Fonts (load in ): https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Geologica:wght@300;400;500;600;700;800;900&display=swap ============================================================ */ :root { /* ---- Brand / raw palette ---------------------------------- */ --acid: #BBE30B; /* main accent — CTA, highlights, promo bar */ --acid-hover: #C9F018; /* accent hover */ --acid-glow: rgba(187, 227, 11, .30); /* green glow */ --acid-glow-soft: rgba(187, 227, 11, .15); --acid-glow-strong: rgba(187, 227, 11, .45); /* secondary accent — purple. Use SPARINGLY, only to lift a flat/"sad" design (glows, a single highlight, a hover). Acid green stays primary. */ --pink: #8341C1; /* secondary accent — purple */ --pink-hover: #661FA8; /* secondary accent hover */ --pink-glow: rgba(131, 65, 193, .30); --pink-glow-soft: rgba(131, 65, 193, .14); --pink-glow-strong: rgba(131, 65, 193, .60); --pink-border: rgba(131, 65, 193, .42); /* purple-tinted border on glass cards */ --pink-ring: rgba(131, 65, 193, .18); /* soft inner ring on glass cards */ /* promo-page ambient blue — used only as a soft background glow on the early-access dark sections (never as text/brand). Pairs with acid + purple. */ --blue: #3D6FF0; --blue-glow-soft: rgba(61, 111, 240, .16); /* status / feedback (functional colors — separate from the brand accents). The plain hue is for fills/dots/borders; the "-ink" variant is the darker, WCAG-AA readable text color for small microcopy on white/tint. */ --error: #E5484D; --error-soft: rgba(229, 72, 77, .12); --error-ink: #B42318; /* readable red text (~5.9:1 on white) */ --success: #18A957; --success-soft: rgba(24, 169, 87, .12); --success-ink: #0F7A3D; /* readable green text (~5.1:1 on white) */ --warning: #E8A317; --warning-soft: rgba(232, 163, 23, .14); --warning-ink: #8A6206; /* readable amber text on light tint */ --ink: #1E1E21; /* main text, dark buttons, dark sections */ --ink-1c: #1C1C1C; /* dark hover / nested dark surface */ --ink-2b: #2B2B2B; /* dark surface */ --ink-33: #333333; /* dark hover */ --white: #FFFFFF; /* card bg, text on dark */ --bg: #F5F6FA; /* main light section background */ --bg-outer: #E2E4ED; /* outer page background */ --grey-f1: #F1F1F1; /* light grey surface */ --grey-ef: #EFEFEF; /* light grey surface */ --muted: #6B6B68; /* secondary text, captions */ --line: rgba(14, 14, 14, .10); /* borders, dividers */ /* transparent layers on dark surfaces (white-based) */ --on-dark-60: rgba(255, 255, 255, .60); --on-dark-50: rgba(255, 255, 255, .50); --on-dark-40: rgba(255, 255, 255, .40); --on-dark-10: rgba(255, 255, 255, .10); --on-dark-08: rgba(255, 255, 255, .08); --on-dark-06: rgba(255, 255, 255, .06); /* transparent layers on light surfaces (ink-based) */ --on-light-10: rgba(14, 14, 14, .10); --on-light-06: rgba(14, 14, 14, .06); --on-light-05: rgba(14, 14, 14, .05); --on-light-03: rgba(14, 14, 14, .03); /* ---- Semantic — light surfaces (default) ----------------- */ --color-bg: var(--bg-outer); --color-surface: var(--white); --color-surface-2: var(--bg); --color-surface-3: var(--grey-f1); --color-text: var(--ink); --color-text-muted: var(--muted); --color-border: var(--line); --color-accent: var(--acid); --color-accent-hover: var(--acid-hover); --color-on-accent: var(--ink); /* dark text on the green */ --color-accent-2: var(--pink); /* secondary accent (use sparingly) */ --color-accent-2-hover: var(--pink-hover); --color-on-accent-2: var(--white); /* white text on the purple */ --color-error: var(--error); --color-error-bg: var(--error-soft); --color-error-text: var(--error-ink); /* AA-readable error microcopy */ --color-success: var(--success); --color-success-bg: var(--success-soft); --color-success-text: var(--success-ink); /* AA-readable success microcopy */ --color-warning: var(--warning); --color-warning-bg: var(--warning-soft); --color-warning-text: var(--warning-ink); /* AA-readable warning microcopy */ --color-on-status: var(--white); /* white text on a solid status fill */ /* ---- Semantic — dark sections (Ink background) ----------- */ --color-dark-bg: var(--ink); --color-dark-surface: var(--ink-2b); --color-dark-surface-2: var(--ink-1c); --color-on-dark: var(--white); --color-on-dark-muted: var(--on-dark-60); --color-on-dark-border: var(--on-dark-10); /* ---- Typography ------------------------------------------ */ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Geologica', var(--font-sans); /* responsive type scale */ --fs-display: clamp(2.75rem, 6vw, 5rem); --fs-h1: clamp(2.25rem, 4.5vw, 3.5rem); --fs-h2: clamp(1.75rem, 3vw, 2.5rem); --fs-h3: clamp(1.25rem, 2vw, 1.625rem); --fs-lead: clamp(1.0625rem, 1.4vw, 1.25rem); --fs-body: 1rem; --fs-sm: .875rem; --fs-xs: .75rem; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; --fw-black: 900; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; /* ---- Radius — strongly rounded --------------------------- */ --radius-sm: 12px; --radius-md: 18px; --radius-lg: 28px; --radius-xl: 40px; --radius-pill: 999px; /* ---- Spacing scale (4px base) ---------------------------- */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --space-10: 4rem; --space-12: 6rem; --space-16: 8rem; /* ---- Shadows --------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(14, 14, 14, .06); --shadow-md: 0 6px 20px rgba(14, 14, 14, .08); --shadow-lg: 0 16px 48px rgba(14, 14, 14, .10); --shadow-acid: 0 10px 30px rgba(187, 227, 11, .30); --shadow-pink: 0 10px 30px rgba(131, 65, 193, .30); /* ---- Layout ---------------------------------------------- */ --container-max: 1200px; --container-pad: clamp(1rem, 4vw, 2.5rem); --header-h: 72px; /* sticky header height */ /* ---- Controls -------------------------------------------- */ --tap-min: 44px; /* minimum touch target */ --icon-btn: 40px; /* icon button box */ --btn-pad-y: 12px; /* button vertical padding */ --btn-pad-x: 24px; /* button horizontal padding */ /* ---- Motion ---------------------------------------------- */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --dur-fast: .15s; --dur: .25s; --dur-slow: .5s; /* ---- Z-index --------------------------------------------- */ --z-header: 100; --z-overlay: 900; --z-modal: 1000; }