/* ========================================================================== ViziaFlow design tokens — single canonical source. ========================================================================== Loaded first, before every other stylesheet, on every page (index.html, design-system.html, legacy.html). Nothing here renders on its own; this file only declares custom properties and the one global a11y rule that depends on them. Component CSS (core.css, hero.css, home.css, viewer.css, themes.css, business.css, design-system.css) consumes these tokens and must not redeclare them. Palette workflow: 1. Change the primitive values in the PALETTE CONTROL block below. 2. Leave semantic roles (--paper, --blue, --coral, etc.) untouched. 3. CSS components and canvas/WebGL effects consume those shared values. Fixed colors that represent real-world content (country flags, status states, screenshots) intentionally remain local and do not belong to the brand palette. ========================================================================== */ :root { /* ======================================================================== PALETTE CONTROL — edit these values to recolor the whole experience. ======================================================================== */ --palette-soft-ivory: #f3ecde; --palette-soft-ivory-bright: #fffaf0; --palette-soft-ivory-dim: #e5dac8; --palette-terracotta: #a9501c; --palette-sand-linen: #d4af83; /* Copper CTA layer. Sits beside Terracotta rather than replacing it: Terracotta stays the section fill (#capabilities card 03, the hero lead card), copper carries the primary actions and the drafting linework so a button never reads as just another coloured panel. */ --palette-copper: #b95b22; --palette-copper-bright: #d06a2b; --palette-copper-light: #d9915b; --palette-forest: #21443e; --palette-forest-soft: #526b65; --palette-forest-surface: #17312c; --palette-forest-deep: #10211e; --palette-forest-abyss: #091512; /* Product blue. The warm values above are the brand layer; blue is the instrument — selection, geometry, measurement, viewer state. Two values because no single blue clears AA on both canvases: measured on the real tokens, every dark blue fails on Forest Deep (1.06–2.25:1) and Sky fails on Soft Ivory (1.59:1). Same light/dark pairing the forest/sand roles already use. */ --palette-riviera: #183451; --palette-sky: #87c5ea; --palette-white: #ffffff; --palette-black: #000000; /* Functional states are centralized too, but kept separate from the brand palette so a recolor cannot make success, warning and error ambiguous. */ --status-success: #65c662; --status-warning: #f39a45; --status-danger: #d95047; --status-danger-deep: #a42e1f; /* Fixed financial semantics. These values do not follow brand experiments: green always means money/value increasing; red always means decreasing. Use the paired foreground for filled indicators on light surfaces. */ --finance-positive: #00b92d; --finance-negative: #ef454a; --on-finance-positive: var(--palette-black); --on-finance-negative: var(--palette-black); } :root, [data-theme="light"] { /* Semantic roles. Legacy names such as --blue are retained so the established component cascade stays stable while their values now come exclusively from the palette control above. */ --ink: var(--palette-forest-deep); --ink-soft: var(--palette-forest-soft); --paper: var(--palette-soft-ivory); --paper-bright: var(--palette-soft-ivory-bright); --paper-dim: var(--palette-soft-ivory-dim); --line: color-mix(in srgb, var(--palette-forest-deep) 18%, transparent); --line-hard: color-mix(in srgb, var(--palette-forest-deep) 32%, transparent); --acid: var(--palette-sand-linen); /* Product layer. --blue carries accent TEXT (links, `em`, indices, focus), so on Soft Ivory it must be the deep value: Riviera 10.83:1, Sky only 1.59:1. */ --blue: var(--palette-riviera); --blue-soft: color-mix(in srgb, var(--palette-riviera) 12%, transparent); --blue-surface: var(--palette-riviera); --on-blue: var(--palette-soft-ivory); --coral: var(--palette-terracotta); /* Copper action roles. --accent-hover and --accent-light are deliberately NOT used as button fills: white on #d06a2b measures 3.60:1, under AA for the 12–15px button labels. They drive the border, the sheen and the linework instead, and hover brightens by lifting the gradient's dark end so the lightest fill anywhere stays #b95b22 (4.58:1). */ --accent-primary: var(--palette-copper); --accent-hover: var(--palette-copper-bright); --accent-light: var(--palette-copper-light); --accent-border: color-mix(in srgb, var(--palette-copper-light) 45%, transparent); --ink-on-bright: var(--palette-forest-deep); --glow-acid: color-mix(in srgb, var(--palette-sand-linen) 22%, transparent); --glow-blue: color-mix(in srgb, var(--palette-terracotta) 16%, transparent); --surface-glass: color-mix(in srgb, var(--palette-soft-ivory) 82%, transparent); --surface-glass-solid: color-mix(in srgb, var(--palette-soft-ivory-bright) 97%, transparent); /* ---- Radius ------------------------------------------------------------- Three-level system from SITE_README (§ "Система скруглений"). --radius is the pre-existing single token kept for backward compatibility with the many small controls that already reference it; --radius-s/-m/-l are new named steps of that same system, available for new component work. Existing layout is NOT migrated onto them in this pass — see the equivalent note for --sp-*/--fs-display-* below. */ --radius: 6px; --radius-s: 6px; --radius-m: 12px; --radius-l: 16px; /* ---- Layout & motion (moved from hero.css :root, values unchanged) --- */ --concept-max: 1440px; --concept-radius: 10px; --pad: clamp(22px, 4vw, 64px); --ease: cubic-bezier(.22, .8, .28, 1); --concept-ease-out: cubic-bezier(.23, 1, .32, 1); --concept-ease-in-out: cubic-bezier(.77, 0, .175, 1); /* ---- Elevation ---------------------------------------------------------- Named steps for new work, matching shadows already in production use. --concept-shadow is kept as an alias so existing hero.css/business.css references keep resolving to the exact same value. */ --shadow-s: 0 8px 24px color-mix(in srgb, var(--palette-forest-deep) 12%, transparent); --shadow-m: 0 28px 70px color-mix(in srgb, var(--palette-forest-deep) 14%, transparent); --shadow-l: 0 34px 84px color-mix(in srgb, var(--palette-black) 30%, transparent); --concept-shadow: var(--shadow-m); /* Component elevation. These large coloured surfaces already separate from the page through their fill and hairline. Outer black shadows pooled at the corners and read as dirty darkening in both themes, so their shared resting and hover states stay flat. The viewer keeps only a restrained inner glow. */ --card-shadow: none; --card-shadow-hover: none; --viewer-stage-shadow: inset 0 0 72px color-mix(in srgb, var(--acid) 8%, transparent); /* ---- Focus ring --------------------------------------------------------- Backing values for the global :focus-visible rule below. Exposed as tokens so a component can match the ring intentionally (e.g. a custom focus treatment that still cites --focus-ring-color). */ --focus-ring-color: var(--blue); --focus-ring-width: 3px; --focus-ring-offset: 3px; color-scheme: light; } /* --------------------------------------------------------------------------- Typographic system (moved from core.css, values unchanged) --------------------------------------------------------------------------- Weights. The stack is system-only (no webfont), so Arial offers exactly three real faces. Anything between them silently snaps to a neighbour: 400 -> Arial Regular 650 / 700 /780 -> Arial Bold 800 / 850 /900 -> Arial Black (Windows family-linking; Bold elsewhere) Declaring 650/750/780/850 therefore produced no visual step at all. Use these three tokens only — they are the steps that actually render. --------------------------------------------------------------------------- */ :root { --fw-body: 400; --fw-strong: 700; --fw-label: 800; /* Font stacks. Both are system-only by design (SITE_README, "no webfont load"); tokenized so new work references a role instead of retyping a stack, not as a step toward loading a webfont. */ --font-display: Georgia, "Times New Roman", serif; --font-body: Arial, Helvetica, sans-serif; /* Display — Georgia. One ramp, reused; no more per-block bespoke clamps. */ --fs-display-xl: clamp(48px, 7.4vw, 112px); --fs-display-l: clamp(40px, 5.6vw, 86px); --fs-display-m: clamp(30px, 3.4vw, 52px); --fs-display-s: clamp(22px, 1.9vw, 28px); /* Body — Arial */ --fs-body-l: 17px; --fs-body: 15px; --fs-body-s: 13px; /* Labels — Arial, uppercase, tracked. 9px is the floor: below that the tracked-caps treatment stops being legible and becomes texture. */ --fs-label: 11px; --fs-label-s: 10px; --fs-micro: 9px; /* Spacing — a real 4px-based ramp to replace 42 hand-tuned values. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* Comfortable reading measure for long-form copy. */ --measure: 68ch; /* Minimum comfortable touch target. */ --tap: 44px; } /* --------------------------------------------------------------------------- Dark theme — the single live definition. (Formerly duplicated in themes.css with different values than core.css's dead first pass; see the file-level note above.) --------------------------------------------------------------------------- */ [data-theme="dark"] { --ink: var(--palette-soft-ivory); --ink-soft: var(--palette-sand-linen); --paper: var(--palette-forest-deep); --paper-bright: var(--palette-forest-surface); --paper-dim: var(--palette-forest-abyss); --line: color-mix(in srgb, var(--palette-soft-ivory) 15%, transparent); --line-hard: color-mix(in srgb, var(--palette-soft-ivory) 30%, transparent); /* Sand Linen stays the bright surface and the secondary-text value — Terracotta reaches only 3.06:1 on this canvas and cannot carry small text. What changed: --blue no longer collapses into Sand as well. Accent is now Sky (8.9:1 here), so accent, surface and secondary text are three readable values again instead of one doing all three jobs. */ --acid: var(--palette-sand-linen); --blue: var(--palette-sky); --blue-soft: color-mix(in srgb, var(--palette-sky) 16%, transparent); /* Filled panels keep the deep blue in both themes so white text on them stays valid without a second pairing (white on Riviera 12.74:1). */ --blue-surface: var(--palette-riviera); --on-blue: var(--palette-soft-ivory); --coral: var(--palette-terracotta); --ink-on-bright: var(--palette-forest-deep); --glow-acid: color-mix(in srgb, var(--palette-sand-linen) 14%, transparent); --glow-blue: color-mix(in srgb, var(--palette-terracotta) 12%, transparent); --surface-glass: color-mix(in srgb, var(--palette-forest-deep) 88%, transparent); --surface-glass-solid: color-mix(in srgb, var(--palette-forest-surface) 97%, transparent); color-scheme: dark; } /* --------------------------------------------------------------------------- Global keyboard-focus baseline. --------------------------------------------------------------------------- Was declared twice, identically, as `.concept-page :focus-visible` in hero.css and `:focus-visible` in design-system.css. `.concept-page` sits on on every page that used it, so the scoped and unscoped versions were already equivalent; this is the one copy both pages now load. Components with a bespoke focus treatment (e.g. `.lang-current`, `.concept-viewer-shell .view-button`) still override this per-element. --------------------------------------------------------------------------- */ :focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }