/* ============================================================================ theme-light.css — opt-in LIGHT render ("daylight intelligence terminal") The dark "intelligence terminal" (DESIGN_SPEC.md) stays the DEFAULT and is left byte-identical. This file is loaded AFTER components.css and only takes effect under :root[data-theme="light"] (set by the anti-FOUC head script + the nav toggle). It does two things, in order: 1. Re-declares the design TOKENS for daylight — same roles, same scale, flipped for a light canvas. Anything that already reads a token (var(--bg) / var(--border) / var(--accent) …) re-themes for free. 2. Patches the handful of selectors in base/components that bake a white- or black-translucent literal (hairlines, sheens, overlay shadows, vignettes) — those can't follow a token, so they're overridden here, scoped to [data-theme="light"]. Principles carried over from the locked spec: ONE accent used only on interactive marks; elevation by surface + hairline (+ a soft shadow, since "lighter than white" is impossible); AA contrast on every real text tier; gain/loss never color-only. ========================================================================== */ :root[data-theme="light"]{ color-scheme:light; /* ---- Canvas & elevation surfaces ---- СПОКОЙНЫЙ прохладно-нейтральный дневной режим. Прежняя тема выжигала глаз: карточки были чистый #FFF (заливают экран) + текст почти-чёрный (~16:1). Теперь: фон — мягкий серо-голубой (НИКОГДА не #FFF как пол), карточки — off-white (тоже НЕ #FFF), вложенные чипы — лёгкий серый, плавающие оверлеи — у белого, поднятые мягкой тенью. «Ярче = выше» сохраняется, но без жгучего белого. */ /* [2026-06-28] Softened ~6-8% darker/greyer — the previous set peaked near-white (surface-4 #F5F8FB) and read as «выжигающий». Now a calm slate-grey ramp; nothing near white. Relative elevation (ярче=выше) preserved. text-3 nudged darker to hold AA. */ --bg: #D2D7DE; --surface-1: #DFE4EA; --surface-2: #D7DCE3; --surface-3: #E6EBF0; --surface-4: #ECF0F5; /* ---- Hairline borders — мягкие slate-полупрозрачные ---- */ --border: rgba(15,23,42,0.09); --border-strong: rgba(15,23,42,0.13); --border-hover: rgba(15,23,42,0.22); /* ---- Text — мягкий тёмный slate (НЕ чёрный): спокойнее, без «выжигающего» 16:1 ---- */ --text-1: #232A33; /* primary — ~13:1 на карточке (мягко, но чётко) */ --text-2: #475160; /* body — ~7.6:1 */ --text-3: #525B69; /* muted/meta — держит AA (~4.8:1) на слегка потемневших карточках */ --text-disabled: #A2AAB5; /* decorative / placeholder only */ /* ---- Accent: signal teal, DARKENED for AA on white (interactive ONLY) ---- #2DD4BF is ~1.6:1 on white — unreadable. Teal-700 family clears AA for link/button text; hover/pressed go darker (= more presence on light). */ --accent: #0F766E; /* links, active, primary-button fill (~5.3:1) */ --accent-hover: #115E59; /* hover lift (darker) */ --accent-active: #134E4A; /* pressed */ --accent-tint: color-mix(in srgb, var(--accent) 10%, transparent); --accent-tint-2: color-mix(in srgb, var(--accent) 16%, transparent); --accent-ring: color-mix(in srgb, var(--accent) 26%, transparent); --accent-ink: #FFFFFF; /* white text on the teal fill */ /* ---- Gain / loss — darkened for AA on white; always paired with glyph ---- */ --up: #15803D; /* ~4.9:1 */ --up-fill: #16A34A; --up-tint: #DCFCE7; --down: #C2261D; /* ~5.3:1 */ --down-fill: #DC2626; --down-tint: #FEE2E2; /* ---- Success / warn / danger ---- */ --success: #15803D; --warn: #B45309; /* amber-700, ~4.6:1 (text); was bright amber on dark */ --warn-fill: #F59E0B; --warn-tint: #FEF3C7; --danger: #C2261D; --danger-fill:#DC2626; /* ---- Interaction fills — dark-translucent on a light surface ---- */ --fill-hover: rgba(15,23,42,0.035); --fill-active: rgba(15,23,42,0.055); --fill-selected: var(--accent-tint); /* ---- Categorical palette (Paul Tol muted is CVD-safe on light too) ---- Only "unknown" needs work — #DDDDDD vanishes on white → mid grey. */ --cat-unknown:#9AA1AC; /* ---- Threshold heat (emission treemap / sector concentration / team bar) ---- Tol-muted (#88CCEE/#DDCC77/#CC6677) спроектированы под ТЁМНЫЙ фон: на свету синий и песочный бледнеют, а роза читается «кричаще-розовой» (стена пинка в treemap'е). Light- версия — спокойнее и чуть глубже, чтобы плитки/бары читались мягко на светлой карточке. */ --thr-low: #7AA1C0; /* <33% — спокойный приглушённый синий */ --thr-mid: #C2A055; /* 33–66% — мягкий янтарь */ --thr-high: #C68B86; /* >66% — приглушённая глино-роза (десатурир., не кричит) */ /* ---- Chart gridlines + crosshair (read by token-chart.js; dark uses JS fallbacks) ---- */ --chart-grid: rgba(15,23,42,0.05); --chart-cross: rgba(15,23,42,0.26); /* ---- Focus ring — teal + light offset (>=3:1 on element AND canvas) ---- */ --focus-ring: 0 0 0 2px var(--surface-1), 0 0 0 4px rgba(15,118,110,0.65); /* ---- Elevation shadows — мягкие прохладно-slate (НЕ чёрные), ТИШЕ прежних ---- Статичные панели держатся на surface+hairline; тени — только под реальными оверлеями и hover-подъёмом карточек. Спокойный slate, без муддёвого серого. */ --shadow-color: 218 28% 34%; --elev-1: 0 1px 2px hsl(var(--shadow-color)/.06), 0 2px 6px hsl(var(--shadow-color)/.05), 0 8px 16px hsl(var(--shadow-color)/.045); --elev-2: 0 2px 4px hsl(var(--shadow-color)/.07), 0 6px 14px hsl(var(--shadow-color)/.07), 0 16px 36px hsl(var(--shadow-color)/.08), 0 28px 56px hsl(var(--shadow-color)/.06); } /* =========================================================================== Literal patches — selectors that bake white/black-translucent values. Scoped to [data-theme="light"] (specificity beats the single-class originals). ========================================================================== */ /* ---- Page chrome ---------------------------------------------------------- */ [data-theme="light"] body::before{ opacity:.025; mix-blend-mode:multiply; } /* grain reads as faint paper tooth */ [data-theme="light"] ::selection{ background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--text-1); } /* scrollbar: white-translucent thumb is invisible on light → dark-translucent */ [data-theme="light"] *{ scrollbar-color:rgba(15,23,42,0.22) transparent; } [data-theme="light"] *::-webkit-scrollbar-thumb{ background:rgba(15,23,42,0.20); background-clip:content-box; } [data-theme="light"] *::-webkit-scrollbar-thumb:hover{ background:rgba(15,23,42,0.32); background-clip:content-box; } /* sticky nav: dark glass → спокойное светло-серое стекло (тон surface-1, НЕ жгучий #FFF) */ [data-theme="light"] .nav::before{ background:rgba(233,237,242,0.82); } /* ---- Hairlines that used white-translucent literals ----------------------- */ [data-theme="light"] .gauge{ background:rgba(15,23,42,0.08); } [data-theme="light"] .table tbody td{ border-bottom-color:rgba(15,23,42,0.08); } [data-theme="light"] .cat-row{ border-bottom-color:rgba(15,23,42,0.08); } /* Строчные hairline-разделители, запечённые белым литералом rgba(255,255,255,.05/.04) (видны только на тёмном фоне) — на светлом сливались. Все эти селекторы строго специфичнее своих базовых правил, так что тёмная тема не меняется. */ [data-theme="light"] .w3-feedrow, [data-theme="light"] .w3-tokrow, [data-theme="light"] .w3-table tbody td, [data-theme="light"] .ws-co, [data-theme="light"] .ws-emis, [data-theme="light"] .ws-econ, [data-theme="light"] .ws-w, [data-theme="light"] .v4-drow, [data-theme="light"] .wl-pos, [data-theme="light"] .v4-mini, [data-theme="light"] .v4-top3 .t3, [data-theme="light"] .v4-market .mkw, [data-theme="light"] .lf-row, [data-theme="light"] .cab-feed .w3-feedrow:first-child{ border-color:var(--border); } /* Трек прогресс-баров (эмиссия / циркуляция) — белый трек невидим на свету (как .gauge). */ [data-theme="light"] .ws-emis .tr, [data-theme="light"] .ec-bar{ background:rgba(15,23,42,0.08); } /* ---- Premium card surface ---- The white top-edge light-catch + white edge-lit ring are invisible on a white card. On light, lift comes from a soft shadow + a faint dark edge. */ [data-theme="light"] .card-premium{ box-shadow:0 1px 2px hsl(var(--shadow-color)/.06), 0 1px 3px hsl(var(--shadow-color)/.05); } [data-theme="light"] .card-premium::before{ background:linear-gradient(90deg, transparent, rgba(15,23,42,.06) 38%, rgba(15,23,42,.06) 62%, transparent); } [data-theme="light"] .card-premium::after{ background:linear-gradient(140deg, rgba(15,23,42,.07), rgba(15,23,42,.02) 40%, transparent 70%); } @media (hover:hover){ [data-theme="light"] a.card-premium:hover, [data-theme="light"] .card-premium.is-link:hover{ box-shadow:0 1px 2px hsl(var(--shadow-color)/.06), 0 18px 40px -18px hsl(var(--shadow-color)/.22); } /* keep the accent edge-lit ring on hover (teal reads fine on white) */ [data-theme="light"] a.card-premium:hover::after, [data-theme="light"] .card-premium.is-link:hover::after{ background:linear-gradient(140deg, rgba(15,118,110,.45), rgba(15,118,110,.06) 42%, transparent 72%); } } /* ---- Overlays / popovers — black drop shadows → soft slate -------------- */ [data-theme="light"] .lb-pop{ box-shadow:var(--elev-2); } @supports (backdrop-filter:blur(8px)){ [data-theme="light"] .lb-pop{ background:rgba(241,244,248,.92); } } [data-theme="light"] .tc-draw{ box-shadow:var(--elev-1); } /* event markers on the chart. Base = hard rgba(0,0,0,.8) drop + a coloured ring — on light that pale coloured halo over the (now grey) chart read «sepia/inverted». DROP the coloured ring entirely; a clean light chip (surface-4) + a neutral cool-slate drop. Colour identity stays via the --mk border + icon + tail (crisp, no muddy halo). (2026-06-28) */ [data-theme="light"] .tc-mk-c{ background:var(--surface-4); box-shadow:0 1px 2px hsl(var(--shadow-color)/.14), 0 4px 10px -4px hsl(var(--shadow-color)/.24); } [data-theme="light"] .tc-mk:hover .tc-mk-c,[data-theme="light"] .tc-mk:focus-visible .tc-mk-c{ background:var(--surface-4); box-shadow:0 1px 2px hsl(var(--shadow-color)/.16), 0 6px 14px -4px hsl(var(--shadow-color)/.30); } /* «Эмиссия у команды» bubble map: base stroke = --surface-1 (fine on dark = a dark separator; on LIGHT it's a light ring → reads as a glow/«засвет» around each bubble + a grey smudge behind labels). Give bubbles a crisp SUBTLE DARK hairline (defines them + separates overlaps, no glow), and labels a clean near-white halo (sticker), not the grey card colour. (2026-06-28) */ [data-theme="light"] .emi-dot{ stroke:rgba(30,41,59,.30); stroke-width:.8; } [data-theme="light"] .emi-dot:hover{ stroke:var(--text-1); stroke-width:1.4; } [data-theme="light"] .emi-lab{ stroke:var(--surface-4); stroke-width:2px; } [data-theme="light"] .tg-device{ box-shadow:0 30px 70px -30px hsl(var(--shadow-color)/.30), inset 0 1px 0 rgba(255,255,255,.5); } [data-theme="light"] .txp-overlay.is-open{ background:rgba(15,23,42,.28); } /* ---- Inline-SVG diagram strokes (cluster graph, methodology, hero figure) ---- CSS wins over the presentation `stroke=` attribute, so these re-theme the decorative white strokes baked into markup. */ [data-theme="light"] .fig-edge{ stroke:rgba(15,23,42,.16); } [data-theme="light"] .fig-track{ stroke:rgba(15,23,42,.08); } /* Methodology pattern diagrams (.fig svg, inline-attribute colours): dark-surface source nodes read harsh on white → soft light node carried by its ring; white- translucent fan-edges / gauge-track vanish → dark; the light fresh dots get a faint ring so they don't blend. Category-colour dots keep their hue. */ [data-theme="light"] .fig svg [fill="#20242B"]{ fill:var(--surface-2); } /* source node (circle/rect) */ [data-theme="light"] .fig svg [fill="#181C22"]{ fill:rgba(15,23,42,.09); } /* progress-bar track */ [data-theme="light"] .fig svg [stroke="rgba(255,255,255,.3)"]{ stroke:var(--border-strong); } [data-theme="light"] .fig svg [stroke="rgba(255,255,255,.14)"]{ stroke:rgba(15,23,42,.20); } /* fan edges */ [data-theme="light"] .fig svg [stroke="rgba(255,255,255,.08)"]{ stroke:rgba(15,23,42,.10); } /* gauge track */ [data-theme="light"] .fig svg [fill="#88CCEE"]{ stroke:rgba(15,23,42,.22); stroke-width:1; } /* fresh dots: anti-blend ring */ [data-theme="light"] .cg-ring{ stroke:rgba(15,23,42,.06); } [data-theme="light"] .cg-legend .cg-line-sw{ background:rgba(15,23,42,.45); } [data-theme="light"] .cg-stage{ background:radial-gradient(140% 120% at 50% 100%, rgba(15,23,42,0.05), transparent 60%), var(--bg); } [data-theme="light"] .cg-node .cg-core{ stroke:rgba(255,255,255,0.85); } /* light halo around node core */ /* hero "signal vs noise" figure: white decorative strokes → dark */ [data-theme="light"] .split-fig svg path[stroke^="rgba(255"], [data-theme="light"] .split-fig svg circle[stroke^="rgba(255"]{ stroke:rgba(15,23,42,.32); } /* =========================================================================== Theme-toggle control (injected into .nav-right by app.js) ========================================================================== */ .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; flex:0 0 auto; color:var(--text-2); border-radius:var(--radius-sm); border:1px solid var(--border); transition:color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std); } .theme-toggle:hover{ color:var(--text-1); border-color:var(--border-hover); background:var(--fill-hover); } .theme-toggle svg{ width:18px; height:18px; stroke:currentColor; stroke-width:1.6; } /* show the icon that represents the action: moon in light mode (→ go dark), sun in dark mode (→ go light). The other is hidden. */ .theme-toggle .ic-sun{ display:none; } .theme-toggle .ic-moon{ display:inline-flex; } :root[data-theme="light"] .theme-toggle .ic-sun{ display:inline-flex; } :root[data-theme="light"] .theme-toggle .ic-moon{ display:none; }