/* ═══════════════════════════════════════════════════════════════════ Yolt v11 — Canonical design tokens (D-N7). Single source of truth for color / spacing / typography variables. All CSS modules у v11/css/ reference these via var(--name). Hex literals are BANNED у production CSS (CLAUDE.md HARD-LOCKED) — every concrete color уведений through oklch() here. Layered: 1. :root — Normis default (warm-neutral surfaces, teal brand) 2. [data-mode="plusultra"] — premium tier (magenta-tinted surfaces, cyan brand) PlusUltra block lives у v11_DESIGN_SYSTEM/plusultra/tokens-plusultra.css — this file consolidates the canonical Normis definitions documented у CLAUDE.md "Color rules — oklch ONLY" section, plus the inferred Normis values used by 19 модулів у v11/css/. Run this file as the FIRST stylesheet on every page so subsequent modules can resolve their var()s. ═══════════════════════════════════════════════════════════════════ */ :root { /* ── Surfaces ──────────────────────────────────────────────────── Warm-neutral hue 70°. Lightness ladder від base → elevated → hover. */ --bg-0: oklch(0.15 0.005 70); --bg-1: oklch(0.19 0.006 70); --bg-2: oklch(0.23 0.008 70); --bg-3: oklch(0.28 0.010 70); --line: oklch(0.32 0.010 70); --line-soft: oklch(0.26 0.008 70); /* ── Ink ladder ────────────────────────────────────────────────── Hue 80° slightly warmer than surfaces so text reads neutral on warm bg. */ --ink-0: oklch(0.97 0.005 80); /* primary heading / number */ --ink-1: oklch(0.88 0.008 80); /* body */ --ink-2: oklch(0.68 0.010 80); /* secondary */ --ink-3: oklch(0.52 0.010 80); /* tertiary / muted */ --ink-4: oklch(0.40 0.010 80); /* faintest / disabled */ /* ── Brand (teal) ─────────────────────────────────────────────── */ --brand: oklch(0.78 0.14 200); --brand-d: oklch(0.32 0.08 200); --accent: var(--brand); /* legacy alias */ --accent-bright:oklch(0.86 0.18 200); --accent-glow: oklch(0.92 0.12 200); /* ── Semantic ──────────────────────────────────────────────────── */ --good: oklch(0.82 0.14 155); --good-d: oklch(0.34 0.08 155); --warn: oklch(0.82 0.14 80); --warn-d: oklch(0.32 0.08 80); --bad: oklch(0.70 0.20 28); --bad-d: oklch(0.30 0.10 28); --info: oklch(0.78 0.13 240); --info-d: oklch(0.30 0.08 240); /* ── Shadows ───────────────────────────────────────────────────── */ --shadow-low: 0 1px 2px oklch(0 0 0 / 0.20); --shadow-mid: 0 2px 6px oklch(0 0 0 / 0.30); --shadow-high: 0 8px 24px oklch(0 0 0 / 0.40); /* ── Spacing (Yolt's locked tokens — CLAUDE.md "STANDARD SPACING") */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-xxl: 32px; /* ── Radii ─────────────────────────────────────────────────────── */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 9999px; /* ── Typography ───────────────────────────────────────────────── */ --font-ui: 'Inter Tight', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', monospace; /* ── Z-index ladder ──────────────────────────────────────────── */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-banner: 300; --z-modal-bg: 900; --z-modal: 1000; --z-toast: 1100; --z-tooltip: 1200; /* ── Animation primitives (D-N31 / CD-5) ─────────────────────── Reusable named animations + token shortcuts so any block can opt-in via `animation: var(--anim-pulse-red)` без re-defining. `prefers-reduced-motion` neutralizes them below. */ --anim-pulse-red: pulse-red 2.2s ease-in-out infinite; --anim-tl-dot-pulse: tl-dot-pulse 1.4s ease-in-out infinite; --anim-glow-active: glow-active 2.2s ease-in-out infinite; --anim-banner-crit: banner-critical 1.8s ease-in-out infinite; --anim-alert-ic: alert-ic-pulse 1.6s ease-in-out infinite; --anim-modal-in: modal-in 0.4s cubic-bezier(0.2, 0.8, 0.3, 1.1) both; } /* ───────────────────────────────────────────────────────────────── Global @keyframes — CD-5 Round 4 polish primitives. All colors via oklch tokens, NO hex / NO rgba. ───────────────────────────────────────────────────────────────── */ @keyframes pulse-red { 0%, 100% { border-color: color-mix(in oklch, var(--bad) 55%, var(--line)); } 50% { border-color: color-mix(in oklch, var(--bad) 90%, var(--line)); } } @keyframes tl-dot-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 14px var(--bad), 0 0 28px color-mix(in oklch, var(--bad) 50%, transparent); } 50% { transform: scale(1.12); box-shadow: 0 0 22px var(--bad), 0 0 48px color-mix(in oklch, var(--bad) 70%, transparent); } } @keyframes glow-active { 0%, 100% { opacity: 0.55; filter: blur(28px); } 50% { opacity: 0.95; filter: blur(36px); } } @keyframes banner-critical { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--bad) 35%, transparent), inset 0 0 0 1px color-mix(in oklch, var(--bad) 50%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in oklch, var(--bad) 0%, transparent), inset 0 0 0 1px color-mix(in oklch, var(--bad) 90%, transparent); } } @keyframes alert-ic-pulse { 0%, 100% { box-shadow: 0 0 0 6px color-mix(in oklch, var(--bad) 12%, transparent), 0 0 32px color-mix(in oklch, var(--bad) 50%, transparent); } 50% { box-shadow: 0 0 0 14px color-mix(in oklch, var(--bad) 0%, transparent), 0 0 48px color-mix(in oklch, var(--bad) 75%, transparent); } } @keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } } /* Honor user accessibility preference — kills the subtle pulses. */ @media (prefers-reduced-motion: reduce) { :root { --anim-pulse-red: none; --anim-tl-dot-pulse: none; --anim-glow-active: none; --anim-banner-crit: none; --anim-alert-ic: none; --anim-modal-in: none; } } /* ───────────────────────────────────────────────────────────────── PlusUltra mode overrides — saturated neon palette for premium pages. Activated via data-mode="plusultra" on or a
. See v11_DESIGN_SYSTEM/plusultra/README.md. ───────────────────────────────────────────────────────────────── */ :root[data-mode="plusultra"], [data-mode="plusultra"] { --bg-0: oklch(0.13 0.018 320); --bg-1: oklch(0.16 0.020 320); --bg-2: oklch(0.20 0.022 320); --bg-3: oklch(0.24 0.024 320); --line: oklch(0.32 0.030 320); --line-soft: oklch(0.26 0.022 320); --ink-0: oklch(0.98 0.008 215); --ink-1: oklch(0.88 0.015 215); --ink-2: oklch(0.68 0.020 215); --ink-3: oklch(0.52 0.020 215); --ink-4: oklch(0.40 0.020 215); --brand: oklch(0.82 0.16 215); --brand-d: oklch(0.32 0.08 215); --accent: var(--brand); --good: oklch(0.88 0.27 155); --good-d: oklch(0.34 0.10 155); --warn: oklch(0.82 0.18 80); --warn-d: oklch(0.32 0.08 80); --bad: oklch(0.68 0.26 15); --bad-d: oklch(0.30 0.10 15); --info: oklch(0.80 0.16 240); --info-d: oklch(0.30 0.08 240); --pu-cyan: oklch(0.82 0.16 215); --pu-magenta: oklch(0.66 0.31 320); --pu-violet: oklch(0.55 0.22 290); --pu-glow: oklch(0.95 0.10 215); } /* Body baseline so tokens take effect immediately when this file loads alone. */ body { background: var(--bg-0); color: var(--ink-1); font-family: var(--font-ui); font-size: 14px; line-height: 1.4; margin: 0; }