/* ========================================================================== Tenark Console · design tokens · v1.0.1 (2026-09-24) Source of truth: prototype/tenark-console.html (direction "H"). Dark-first. Theme resolution order: 1. :root -> dark (default) 2. prefers-color-scheme: light -> light, unless data-theme="dark" 3. [data-theme="light|dark"] -> explicit user choice (Auto/Sötét/Világos) Ambient state light: [data-state="warn|risk"] on . Structural contrast (card/page, line/card, strong line/card) is tuned to pass the existing web/console/visual.test.js gates when alpha-composited: dark 1.24 / 1.61 / 2.53, light 1.24 / 1.58 / 2.45 (floors 1.22/1.55/2.40). Replaces web/console/tenark-tokens.css and web/landing/tenark-tokens.css. ========================================================================== */ :root { color-scheme: dark; /* ---- typography ---- */ --tk-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --tk-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --tk-fs-display: clamp(56px, 7vw, 88px); /* equity hero, weight 300, tracking -0.045em, lh .95 */ --tk-fs-h1: 34px; /* page title, weight 400, tracking -0.02em */ --tk-fs-h2: 15px; /* card title, weight 500 */ --tk-fs-stat: 24px; /* stat tile value, weight 500 */ --tk-fs-body: 14px; --tk-fs-table: 13.5px; --tk-fs-sub: 12.5px; /* secondary text */ --tk-fs-label: 11.5px; /* eyebrow, uppercase, tracking .1em */ --tk-fs-mono-s: 10.5px;/* chart annotations */ --tk-lh: 1.45; /* ---- radii ---- */ --tk-r-lg: 28px; /* cards, sheet, modal */ --tk-r-md: 22px; /* tiles, position tiles */ --tk-r-sm: 14px; /* buttons, segmented */ --tk-r-xs: 9px; /* chips */ --tk-r-input: 12px; /* ---- spacing (4px base) ---- */ --tk-space-1: 4px; --tk-space-2: 8px; --tk-space-3: 12px; --tk-space-4: 16px; --tk-space-5: 20px; --tk-space-6: 24px; --tk-space-8: 32px; --tk-gutter: 24px; /* page padding desktop */ --tk-gutter-mobile: 16px; --tk-rail-w: 72px; --tk-side-w: 460px; /* overview right column */ /* ---- motion ---- */ --tk-ease: cubic-bezier(.2, .8, .2, 1); --tk-dur-fast: 150ms; --tk-dur: 250ms; --tk-dur-slow: 800ms; /* ambient light crossfade */ /* ---- surfaces (dark) ---- */ --tk-bg: #06080E; --tk-glow-a: rgba(56, 110, 255, .34); /* top-left ambient; state-driven */ --tk-glow-b: rgba(64, 200, 190, .15); /* bottom-right */ --tk-glow-c: rgba(120, 90, 255, .10); /* center; state-driven */ --tk-glass: rgba(255, 255, 255, .05); --tk-glass-hi: rgba(255, 255, 255, .085); --tk-glass-top: rgba(255, 255, 255, .10); --tk-glass-bot: rgba(255, 255, 255, .03); --tk-glass-solid: rgba(16, 21, 34, .86); /* popovers, sheet, modal, capsule */ --tk-blur: 30px; --tk-line: rgba(255, 255, 255, .15); --tk-line-2: rgba(255, 255, 255, .06); --tk-line-strong: rgba(255, 255, 255, .28); --tk-chip: rgba(255, 255, 255, .07); --tk-seg-bg: rgba(0, 0, 0, .28); --tk-seg-on: rgba(255, 255, 255, .14); --tk-seg-on-shadow: none; --tk-shadow: 0 30px 80px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .07); --tk-shadow-sm: inset 0 1px 0 rgba(255, 255, 255, .06); --tk-shadow-pop: 0 30px 90px rgba(0, 0, 0, .55); --tk-overlay: rgba(3, 5, 10, .62); --tk-input-bg: rgba(0, 0, 0, .25); --tk-input-line: var(--tk-line-strong); /* ---- ink ---- */ --tk-ink: #EEF1F7; --tk-ink-2: rgba(238, 241, 247, .74); --tk-ink-3: rgba(238, 241, 247, .58); --tk-ink-4: rgba(238, 241, 247, .44); /* ---- brand / accent ---- */ --tk-accent: #6E9BFF; --tk-accent-ink: #8FB4FF; /* links, accent text */ --tk-accent-soft: rgba(110, 155, 255, .16); --tk-accent-line: rgba(143, 180, 255, .5); --tk-on-accent: #07101F; /* ---- semantic ---- */ --tk-pos: #5BE3A8; --tk-pos-soft: rgba(91, 227, 168, .14); --tk-pos-line: rgba(91, 227, 168, .6); --tk-pos-text: #9CF2CC; --tk-neg: #FF8A8A; --tk-neg-soft: rgba(255, 138, 138, .12); --tk-neg-line: rgba(255, 138, 138, .42); --tk-neg-text: #FFB3B3; --tk-warn: #FFC857; --tk-warn-soft: rgba(255, 178, 36, .14); --tk-warn-line: rgba(255, 200, 87, .4); --tk-vault: #B79CFF; --tk-dot-ok: #3DDC97; --tk-dot-warn: #FFB224; --tk-dot-risk: #FF5F57; /* ---- data viz ---- */ --tk-track: rgba(255, 255, 255, .07); --tk-tick: rgba(255, 255, 255, .16); --tk-grid: rgba(255, 255, 255, .05); --tk-hatch: rgba(255, 255, 255, .05); --tk-eq-area: rgba(92, 141, 255, .40); --tk-eq-a: #7AA2FF; /* line gradient start */ --tk-eq-b: #A9C3FF; /* line gradient end */ --tk-eq-glow: .45; /* opacity of blurred glow line */ --tk-now: #FFFFFF; --tk-gauge-amber-a: #FFA928; --tk-gauge-amber-b: #FFD98A; --tk-gauge-blue-a: #4F7BFF; --tk-gauge-blue-b: #A9C3FF; --tk-gauge-red-a: #FF5F57; --tk-gauge-red-b: #FF9A94; } /* ---------- light palette (system preference) ---------- */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --tk-bg: #E0E5ED; --tk-glow-a: rgba(110, 150, 255, .30); --tk-glow-b: rgba(90, 210, 195, .22); --tk-glow-c: rgba(170, 150, 255, .16); --tk-glass: rgba(255, 255, 255, .80); --tk-glass-hi: rgba(255, 255, 255, .86); --tk-glass-top: rgba(255, 255, 255, .92); --tk-glass-bot: rgba(255, 255, 255, .52); --tk-glass-solid: rgba(255, 255, 255, .92); --tk-line: rgba(14, 20, 34, .21); --tk-line-2: rgba(14, 20, 34, .08); --tk-line-strong: rgba(14, 20, 34, .38); --tk-chip: rgba(14, 20, 34, .055); --tk-seg-bg: rgba(14, 20, 34, .06); --tk-seg-on: #FFFFFF; --tk-seg-on-shadow: 0 1px 3px rgba(14, 20, 34, .12); --tk-shadow: 0 1px 2px rgba(14, 20, 34, .05), 0 24px 60px rgba(30, 45, 90, .10); --tk-shadow-sm: 0 1px 2px rgba(14, 20, 34, .05), 0 10px 30px rgba(30, 45, 90, .07); --tk-shadow-pop: 0 1px 2px rgba(14, 20, 34, .06), 0 30px 80px rgba(30, 45, 90, .22); --tk-overlay: rgba(30, 40, 70, .28); --tk-input-bg: rgba(255, 255, 255, .85); --tk-input-line: var(--tk-line-strong); --tk-ink: #0E1422; --tk-ink-2: rgba(14, 20, 34, .76); --tk-ink-3: rgba(14, 20, 34, .64); --tk-ink-4: rgba(14, 20, 34, .52); --tk-accent: #2F5BFF; --tk-accent-ink: #2350E6; --tk-accent-soft: rgba(47, 91, 255, .10); --tk-accent-line: rgba(47, 91, 255, .42); --tk-on-accent: #FFFFFF; --tk-pos: #0E9F62; --tk-pos-soft: rgba(14, 159, 98, .11); --tk-pos-line: rgba(14, 159, 98, .5); --tk-pos-text: #0B7A4B; --tk-neg: #D6453A; --tk-neg-soft: rgba(214, 69, 58, .09); --tk-neg-line: rgba(214, 69, 58, .4); --tk-neg-text: #B03A2E; --tk-warn: #9A6400; --tk-warn-soft: #FFEFCF; --tk-warn-line: rgba(201, 129, 0, .35); --tk-vault: #6A4FD8; --tk-dot-ok: #12B070; --tk-track: rgba(14, 20, 34, .07); --tk-tick: rgba(14, 20, 34, .2); --tk-grid: rgba(14, 20, 34, .06); --tk-hatch: rgba(14, 20, 34, .06); --tk-eq-area: rgba(47, 91, 255, .18); --tk-eq-a: #6E8BFF; --tk-eq-b: #2350E6; --tk-eq-glow: .14; --tk-now: #0E1422; } } /* ---------- explicit choice: light ---------- */ :root[data-theme="light"] { color-scheme: light; --tk-bg: #E0E5ED; --tk-glow-a: rgba(110, 150, 255, .30); --tk-glow-b: rgba(90, 210, 195, .22); --tk-glow-c: rgba(170, 150, 255, .16); --tk-glass: rgba(255, 255, 255, .80); --tk-glass-hi: rgba(255, 255, 255, .86); --tk-glass-top: rgba(255, 255, 255, .92); --tk-glass-bot: rgba(255, 255, 255, .52); --tk-glass-solid: rgba(255, 255, 255, .92); --tk-line: rgba(14, 20, 34, .21); --tk-line-2: rgba(14, 20, 34, .08); --tk-line-strong: rgba(14, 20, 34, .38); --tk-chip: rgba(14, 20, 34, .055); --tk-seg-bg: rgba(14, 20, 34, .06); --tk-seg-on: #FFFFFF; --tk-seg-on-shadow: 0 1px 3px rgba(14, 20, 34, .12); --tk-shadow: 0 1px 2px rgba(14, 20, 34, .05), 0 24px 60px rgba(30, 45, 90, .10); --tk-shadow-sm: 0 1px 2px rgba(14, 20, 34, .05), 0 10px 30px rgba(30, 45, 90, .07); --tk-shadow-pop: 0 1px 2px rgba(14, 20, 34, .06), 0 30px 80px rgba(30, 45, 90, .22); --tk-overlay: rgba(30, 40, 70, .28); --tk-input-bg: rgba(255, 255, 255, .85); --tk-input-line: var(--tk-line-strong); --tk-ink: #0E1422; --tk-ink-2: rgba(14, 20, 34, .76); --tk-ink-3: rgba(14, 20, 34, .64); --tk-ink-4: rgba(14, 20, 34, .52); --tk-accent: #2F5BFF; --tk-accent-ink: #2350E6; --tk-accent-soft: rgba(47, 91, 255, .10); --tk-accent-line: rgba(47, 91, 255, .42); --tk-on-accent: #FFFFFF; --tk-pos: #0E9F62; --tk-pos-soft: rgba(14, 159, 98, .11); --tk-pos-line: rgba(14, 159, 98, .5); --tk-pos-text: #0B7A4B; --tk-neg: #D6453A; --tk-neg-soft: rgba(214, 69, 58, .09); --tk-neg-line: rgba(214, 69, 58, .4); --tk-neg-text: #B03A2E; --tk-warn: #9A6400; --tk-warn-soft: #FFEFCF; --tk-warn-line: rgba(201, 129, 0, .35); --tk-vault: #6A4FD8; --tk-dot-ok: #12B070; --tk-track: rgba(14, 20, 34, .07); --tk-tick: rgba(14, 20, 34, .2); --tk-grid: rgba(14, 20, 34, .06); --tk-hatch: rgba(14, 20, 34, .06); --tk-eq-area: rgba(47, 91, 255, .18); --tk-eq-a: #6E8BFF; --tk-eq-b: #2350E6; --tk-eq-glow: .14; --tk-now: #0E1422; } /* ---------- explicit choice: dark (re-assert, wins over the light media block) ---------- */ :root[data-theme="dark"] { color-scheme: dark; --tk-bg: #06080E; --tk-glow-a: rgba(56, 110, 255, .34); --tk-glow-b: rgba(64, 200, 190, .15); --tk-glow-c: rgba(120, 90, 255, .10); --tk-glass: rgba(255, 255, 255, .05); --tk-glass-hi: rgba(255, 255, 255, .085); --tk-glass-top: rgba(255, 255, 255, .10); --tk-glass-bot: rgba(255, 255, 255, .03); --tk-glass-solid: rgba(16, 21, 34, .86); --tk-line: rgba(255, 255, 255, .15); --tk-line-2: rgba(255, 255, 255, .06); --tk-line-strong: rgba(255, 255, 255, .28); --tk-chip: rgba(255, 255, 255, .07); --tk-seg-bg: rgba(0, 0, 0, .28); --tk-seg-on: rgba(255, 255, 255, .14); --tk-seg-on-shadow: none; --tk-shadow: 0 30px 80px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .07); --tk-shadow-sm: inset 0 1px 0 rgba(255, 255, 255, .06); --tk-shadow-pop: 0 30px 90px rgba(0, 0, 0, .55); --tk-overlay: rgba(3, 5, 10, .62); --tk-input-bg: rgba(0, 0, 0, .25); --tk-input-line: var(--tk-line-strong); --tk-ink: #EEF1F7; --tk-ink-2: rgba(238, 241, 247, .74); --tk-ink-3: rgba(238, 241, 247, .58); --tk-ink-4: rgba(238, 241, 247, .44); --tk-accent: #6E9BFF; --tk-accent-ink: #8FB4FF; --tk-accent-soft: rgba(110, 155, 255, .16); --tk-accent-line: rgba(143, 180, 255, .5); --tk-on-accent: #07101F; --tk-pos: #5BE3A8; --tk-pos-soft: rgba(91, 227, 168, .14); --tk-pos-line: rgba(91, 227, 168, .6); --tk-pos-text: #9CF2CC; --tk-neg: #FF8A8A; --tk-neg-soft: rgba(255, 138, 138, .12); --tk-neg-line: rgba(255, 138, 138, .42); --tk-neg-text: #FFB3B3; --tk-warn: #FFC857; --tk-warn-soft: rgba(255, 178, 36, .14); --tk-warn-line: rgba(255, 200, 87, .4); --tk-vault: #B79CFF; --tk-dot-ok: #3DDC97; --tk-track: rgba(255, 255, 255, .07); --tk-tick: rgba(255, 255, 255, .16); --tk-grid: rgba(255, 255, 255, .05); --tk-hatch: rgba(255, 255, 255, .05); --tk-eq-area: rgba(92, 141, 255, .40); --tk-eq-a: #7AA2FF; --tk-eq-b: #A9C3FF; --tk-eq-glow: .45; --tk-now: #FFFFFF; } /* ---------- ambient state light (both themes) ---------- */ :root[data-state="warn"] { --tk-glow-a: rgba(255, 168, 40, .30); --tk-glow-c: rgba(255, 120, 60, .10); } :root[data-state="risk"] { --tk-glow-a: rgba(255, 72, 72, .32); --tk-glow-c: rgba(255, 60, 120, .12); } /* ---------- the ambient layer itself ---------- */ .tk-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(1000px 700px at 14% -8%, var(--tk-glow-a), transparent 60%), radial-gradient(800px 600px at 98% 102%, var(--tk-glow-b), transparent 62%), radial-gradient(640px 520px at 62% 40%, var(--tk-glow-c), transparent 70%); transition: background var(--tk-dur-slow) ease; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }