/* ═══════════════════════════════════════════════════════════════════════ GrowoAI — Premium Design System v2 Inspiration: Linear, Stripe Dashboard, Vercel, Raycast, Arc Browser Typography: Geist (Vercel) + JetBrains Mono — NOT Inter (AI-slop marker) Principles: Depth (layered glass), Clarity (typographic hierarchy), Delight (subtle motion), Trust (restrained color). Theme model: Default (no attribute) = DARK (cinematic command center) [data-theme="light"] = LIGHT (premium daytime) [data-theme="dark"] = DARK (explicit) Toggle via fmTheme.toggle() — writes data-theme on . ═══════════════════════════════════════════════════════════════════════ */ /* ── Self-hosted fonts (no CDN — RF reliability) ── */ @font-face { font-family: 'Geist'; src: url('fonts/Geist-Variable.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; font-style: normal; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-Variable.woff2') format('woff2-variations'); font-weight: 100 800; font-display: swap; font-style: normal; } /* ── Tokens shared by both themes (never change with theme) ── */ :root { /* Brand palette */ --color-brand: #059669; --color-accent: #0f172a; --color-emerald: #059669; --color-emerald-light: #34d399; --color-cyan: #06b6d4; --color-violet: #4f46e5; /* indigo — enterprise accent, NOT AI purple (#4f46e5 BANNED by taste-skill) */ --color-rose: #f43f5e; --color-amber: #f59e0b; --color-navy: #0a0f1c; /* Опасная заливка (кнопки danger): rose-600 даёт 1.06:1 с rose-текстом и 3.66:1 с белым — rose-700 держит белый текст на уровне AA (6.28:1) */ --danger-solid: #be123c; --danger-solid-hover: #9f1239; /* Emerald glow (used widely for active states) */ --emerald: #059669; --emerald-light: #34d399; --emerald-glow: rgba(52, 211, 153, 0.14); /* Type scale */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; --text-4xl: 2.5rem; --text-5xl: 3rem; /* Font weights */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Line heights */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.625; /* Premium gradients (theme-agnostic). A11Y (WCAG AA): под белым текстом оба эндпоинта ≥4.5:1 — emerald-700 (#047857, 5.49:1), cyan-700 (#0e7490, 5.36:1), emerald-800 (#065f46, 7.64:1), indigo-600/700 (6.28:1+). Светлые 400/500-шаги (#34d399, #06b6d4) давали 1.9–2.4:1 — текст читался только на жирных заголовках. */ --gradient-brand: linear-gradient(135deg, #047857 0%, #0e7490 100%); --gradient-emerald: linear-gradient(135deg, #047857 0%, #065f46 100%); --gradient-violet: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%); --gradient-navy: linear-gradient(180deg, #0a0f1c 0%, #111827 100%); --gradient-aurora: linear-gradient(135deg, #34d399 0%, #06b6d4 50%, #4f46e5 100%); /* Radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* Status colors. Тёмная тема: error/info в 500-шаге давали 4.39/4.49:1 на bg-card-solid (#161e35) — подняты до 400-шага: #f87171 = 5.96:1, #60a5fa = 6.5:1. */ --status-ok: #10b981; --status-warn: #f59e0b; --status-error: #f87171; --status-info: #60a5fa; /* Typography — Geist (premium sans, unique character) + JetBrains Mono. Geist is Vercel's font: geometric, tight, modern — NOT Inter (AI-slop marker). Fallback chain: Geist → system (in case @font-face not loaded yet). */ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', Consolas, monospace; --font-display: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Transitions */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 0.15s; --duration-normal: 0.25s; --duration-slow: 0.4s; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; /* Layout tokens */ --sidebar-w: 248px; --sidebar-bg: rgba(10, 15, 28, 0.96); --sidebar-border: rgba(255, 255, 255, 0.06); --sidebar-border-strong: rgba(255, 255, 255, 0.12); /* Backwards-compat aliases (so older templates keep working) */ --border: var(--border-primary); --card-bg: var(--bg-card); --content-bg: var(--bg-primary); } /* ═══════════════════════════════════════════════════════════════════════ DARK THEME (default — cinematic command center) ═══════════════════════════════════════════════════════════════════════ */ :root, :root[data-theme="dark"] { color-scheme: dark; /* Surfaces */ --bg-primary: #07091a; --bg-secondary: #0f172a; --bg-tertiary: #1f2937; --bg-card: rgba(22, 30, 53, 0.96); /* near-solid — looks premium WITHOUT backdrop-filter */ --bg-card-solid: #161e35; --bg-card-hover: rgba(30, 41, 59, 0.98); --bg-inset: rgba(255, 255, 255, 0.04); --bg-nav: rgba(10, 15, 28, 0.92); --content-bg: #07091a; /* Glass system — blur reserved for FIXED elements only (header, sidebar, modal) Scrolling cards use near-solid bg-card (0.96 opacity) which looks identical but costs ZERO GPU compositing. backdrop-filter is #1 mobile jank cause. */ --glass-bg: rgba(15, 23, 42, 0.96); --glass-border: rgba(255, 255, 255, 0.08); --glass-blur: 0px; /* disabled globally — applied per-element on fixed surfaces only */ /* Premium shadows (layered depth) */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-xl: 0 20px 56px rgba(0, 0, 0, 0.55), 0 8px 20px rgba(0, 0, 0, 0.3); --shadow-2xl: 0 40px 80px rgba(0, 0, 0, 0.6), 0 16px 32px rgba(0, 0, 0, 0.35); --shadow-glow: 0 0 0 1px rgba(52, 211, 153, 0.18), 0 12px 36px rgba(5, 150, 105, 0.22); --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.3); /* Underglow (cinematic accent under cards) */ --underglow-emerald: 0 12px 40px -8px rgba(52, 211, 153, 0.45); --underglow-violet: 0 12px 40px -8px rgba(129, 140, 248, 0.4); --underglow-amber: 0 12px 40px -8px rgba(251, 191, 36, 0.35); --underglow-rose: 0 12px 40px -8px rgba(251, 113, 133, 0.4); --underglow-cyan: 0 12px 40px -8px rgba(34, 211, 238, 0.4); /* Text colors */ --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-tertiary: #94a3b8; --text-muted: #8294b0; --text-inverse: #0a0f1c; --text-on-accent: #ffffff; /* Brand color overrides (dark): violet поднят до indigo-300 — #4f46e5 давал 2.2–2.6:1 на тёмных поверхностях (бейджи, text-violet, stat-иконки); #a5b4fc ≈ 8:1 */ --color-violet: #a5b4fc; /* Input borders — hairline --border-secondary (alpha 0.12) давал <3:1 на инпутах; --border-input держит контраст границы ≥3:1 (WCAG UI) */ --border-input: rgba(255, 255, 255, 0.30); /* Badge/placeholder text (токены для светлых плашек и placeholder) */ --text-placeholder: var(--text-muted); --badge-warn-text: var(--status-warn); --badge-error-text: var(--status-error); --badge-muted-text: var(--text-muted); /* Semantic status tokens (dark) */ --status-neutral-bg: #2a3447; --status-neutral-text: #e2e8f0; --status-neutral-dot: #94a3b8; /* Secondary button tokens (dark) */ --btn-secondary-bg: #1e293b; --btn-secondary-text: #e2e8f0; --btn-secondary-border: #334155; --btn-secondary-hover: rgba(52, 211, 153, 0.1); /* Borders */ --border-primary: rgba(255, 255, 255, 0.07); --border-secondary: rgba(255, 255, 255, 0.12); --border-accent: rgba(52, 211, 153, 0.35); --border-glass: rgba(255, 255, 255, 0.1); /* Ambient gradients */ --gradient-veil: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(52, 211, 153, 0.10) 0%, transparent 70%); --gradient-divider: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.25) 30%, rgba(34, 211, 238, 0.12) 70%, transparent); /* Sidebar stays dark even in light theme (cinematic frame) */ --sidebar-bg: rgba(7, 9, 26, 0.96); --sidebar-border: rgba(255, 255, 255, 0.06); --sidebar-border-strong: rgba(255, 255, 255, 0.12); --sidebar-text: rgba(255, 255, 255, 0.62); --sidebar-text-hover: rgba(255, 255, 255, 0.96); --sidebar-text-active: #34d399; --sidebar-group-label: rgba(255, 255, 255, 0.55); /* a11y: 0.32 давало 2.8:1 на тёмном сайдбаре; 0.55 ≈ 6.1:1 */ } /* ═══════════════════════════════════════════════════════════════════════ LIGHT THEME — premium daytime (warm paper + emerald accents) ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="light"] { color-scheme: light; /* Surfaces — warm off-white, not pure white */ --bg-primary: #fafaf7; --bg-secondary: #f4f3ef; --bg-tertiary: #ecebe5; --bg-card: rgba(255, 255, 255, 0.78); --bg-card-solid: #ffffff; --bg-card-hover: rgba(255, 255, 255, 0.95); --bg-inset: rgba(15, 23, 42, 0.04); --bg-nav: rgba(248, 247, 242, 0.9); --content-bg: #fafaf7; /* Glass system — blur disabled globally for perf (near-solid bg instead) */ --glass-bg: rgba(255, 255, 255, 0.96); --glass-border: rgba(15, 23, 42, 0.06); --glass-blur: 0px; /* Shadows — softer in light */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.05); --shadow-xl: 0 20px 56px rgba(15, 23, 42, 0.10), 0 8px 20px rgba(15, 23, 42, 0.06); --shadow-2xl: 0 40px 80px rgba(15, 23, 42, 0.12), 0 16px 32px rgba(15, 23, 42, 0.08); --shadow-glow: 0 0 0 1px rgba(5, 150, 105, 0.12), 0 12px 36px rgba(5, 150, 105, 0.15); --shadow-inner: inset 0 1px 2px rgba(15, 23, 42, 0.05); /* Underglow — softer in light */ --underglow-emerald: 0 12px 40px -8px rgba(5, 150, 105, 0.28); --underglow-violet: 0 12px 40px -8px rgba(79, 70, 229, 0.22); --underglow-amber: 0 12px 40px -8px rgba(245, 158, 11, 0.22); --underglow-rose: 0 12px 40px -8px rgba(244, 63, 94, 0.22); --underglow-cyan: 0 12px 40px -8px rgba(6, 182, 212, 0.22); /* Text */ --text-primary: #0f172a; --text-secondary: #475569; --text-tertiary: #64748b; --text-muted: #6b7280; --text-inverse: #ffffff; --text-on-accent: #ffffff; /* Semantic status tokens (light) */ --status-neutral-bg: rgba(100, 116, 139, 0.12); --status-neutral-text: #475569; --status-neutral-dot: #64748b; /* Secondary button tokens (light) */ --btn-secondary-bg: rgba(100, 116, 139, 0.08); --btn-secondary-text: #334155; --btn-secondary-border: rgba(100, 116, 139, 0.2); --btn-secondary-hover: rgba(5, 150, 105, 0.08); /* ═══ Brand + status color overrides for WCAG AA on light backgrounds ═══ */ /* Text-use shades: 700/800 for emerald, 700 for others (WCAG ≥4.5:1 on white) */ --color-emerald: #047857; /* emerald-700: 5.24:1 on #fafaf7 ✅ */ --color-emerald-light: #059669; /* emerald-600: used as fill on dark sidebar */ --color-cyan: #0e7490; /* cyan-700: 4.6:1 ✅ */ --color-amber: #b45309; /* amber-700: 5.3:1 ✅ */ --color-rose: #be123c; /* rose-700: 4.6:1 ✅ */ --color-violet: #4338ca; /* indigo-700: 6.2:1 ✅ */ /* Status text colors — darker for light theme readability */ --status-ok: #047857; /* was #10b981 (2.43:1) → now 5.24:1 ✅ */ --status-warn: #b45309; /* was #f59e0b (2.05:1) → now 5.3:1 ✅ */ --status-error: #dc2626; /* was #ef4444 (3.6:1) → now 4.5:1 ✅ */ --status-info: #1d4ed8; /* was #3b82f6 (3.52:1) → now 5.5:1 ✅ */ /* Badge/placeholder text — light: --status-warn давал 4.3:1 на янтарной 15%-плашке, --status-error 4.0:1 на красной, muted 4.2:1 на inset; 700/800-шаги держат ≥4.5:1 на композите плашка+карточка */ --text-placeholder: #5b6b81; --badge-warn-text: #92400e; --badge-error-text: #b91c1c; --badge-muted-text: #5b6b81; /* Borders */ --border-primary: rgba(15, 23, 42, 0.08); --border-secondary: rgba(15, 23, 42, 0.14); --border-input: rgba(15, 23, 42, 0.30); /* ≥3:1 на bg-inset */ --border-accent: rgba(5, 150, 105, 0.4); --border-glass: rgba(255, 255, 255, 0.6); /* Ambient gradients — subtler in light */ --gradient-veil: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(5, 150, 105, 0.06) 0%, transparent 70%); --gradient-divider: linear-gradient(90deg, transparent, rgba(5, 150, 105, 0.18) 30%, rgba(6, 182, 212, 0.08) 70%, transparent); /* Sidebar stays cinematic dark even in light mode — frames content */ --sidebar-bg: rgba(7, 9, 26, 0.97); --sidebar-border: rgba(255, 255, 255, 0.06); --sidebar-border-strong: rgba(255, 255, 255, 0.12); --sidebar-text: rgba(255, 255, 255, 0.62); --sidebar-text-hover: rgba(255, 255, 255, 0.96); --sidebar-text-active: #34d399; --sidebar-group-label: rgba(255, 255, 255, 0.55); /* a11y: 0.32 давало 2.8:1 на тёмном сайдбаре; 0.55 ≈ 6.1:1 */ } /* ═══ Reset & base ═══ */ * { box-sizing: border-box; } html, body { height: 100%; overflow-x: hidden; } body { font-family: var(--font-sans); background: var(--bg-primary); color: var(--text-primary); margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11', 'ss01'; letter-spacing: -0.011em; transition: background-color var(--duration-normal) var(--ease-smooth), color var(--duration-normal) var(--ease-smooth); } /* Ambient gradient orbs — cinematic depth behind content. These create the CONTRAST that backdrop-filter needs to blur. Without them, glass cards look solid/opaque. */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 55% 45% at 12% 8%, rgba(52, 211, 153, 0.14) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 88% 18%, rgba(79, 70, 229, 0.10) 0%, transparent 55%), radial-gradient(ellipse 45% 35% at 60% 85%, rgba(6, 182, 212, 0.08) 0%, transparent 50%), radial-gradient(ellipse 35% 30% at 30% 60%, rgba(245, 158, 11, 0.04) 0%, transparent 45%); pointer-events: none; z-index: 0; animation: ambientDrift 32s ease-in-out infinite alternate; } :root[data-theme="light"] body::before { background: radial-gradient(ellipse 55% 45% at 12% 8%, rgba(5, 150, 105, 0.08) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 88% 18%, rgba(79, 70, 229, 0.05) 0%, transparent 55%), radial-gradient(ellipse 45% 35% at 60% 85%, rgba(6, 182, 212, 0.04) 0%, transparent 50%); } @keyframes ambientDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-2%, 1%, 0) scale(1.04); } } /* Scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--border-secondary) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border-secondary); border-radius: 4px; } *::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* Selection */ ::selection { background: rgba(52, 211, 153, 0.25); color: var(--text-primary); } /* Focus ring — единый канон с components.css (accent-text читаем в обеих темах) */ :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 4px; } /* ═══ Density modes — compact reduces spacing globally ═══ */ :root[data-density="compact"] { --space-1: 0.15rem; --space-2: 0.35rem; --space-3: 0.5rem; --space-4: 0.75rem; --space-5: 0.9rem; --space-6: 1.1rem; --space-8: 1.5rem; --space-10: 1.9rem; --space-12: 2.25rem; --text-sm: 0.8125rem; --text-xs: 0.7rem; } :root[data-density="compact"] .fm-stat { padding: var(--space-3); } :root[data-density="compact"] .fm-panel { padding: var(--space-3); } /* ═══════════════════════════════════════════════════════════════════════ PREMIUM ENHANCEMENT LAYER — global motion + LIVE indicators + count-up Applied across ALL pages via attribute selectors (zero per-page edits). ═══════════════════════════════════════════════════════════════════════ */ /* ── LIVE pulse — for badges/indicators that signal realtime activity ── */ .fm-live, [data-live] { position: relative; } .fm-live::before, [data-live]::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 0.4em; vertical-align: middle; animation: fm-live-pulse 1.6s ease-in-out infinite; } @keyframes fm-live-pulse { /* opacity-only (composite): анимация box-shadow-кольца репейнтила каждую live-точку в списках 60 раз/с; мерцание плотности сохраняет живость */ 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* Pulse dot variant — standalone colored dot (emerald default) */ .fm-pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #34d399; position: relative; flex-shrink: 0; } .fm-pulse-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #34d399; animation: fm-pulse-ring 1.8s ease-out infinite; } @keyframes fm-pulse-ring { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.6); opacity: 0; } } /* ── Shimmer for loading / "thinking" surfaces ── */ .fm-shimmer { background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%); background-size: 200% 100%; animation: fm-shimmer 1.8s ease-in-out infinite; } :root[data-theme="light"] .fm-shimmer { background: linear-gradient(110deg, transparent 30%, rgba(15,23,42,0.04) 50%, transparent 70%); background-size: 200% 100%; } @keyframes fm-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── Count-up readiness — tabular nums so digits don't jitter ── */ [data-count-up] { font-variant-numeric: tabular-nums; } /* ── Universal hover-lift for interactive cards without explicit hover ── Targets any element with a [data-glass] attribute or .glass-card class that pages may use. Safe no-op if not present. */ [data-glass], .glass-card { background: var(--glass-bg); /* backdrop-filter убран: --glass-blur=0 глобально, а валидация фильтра всё равно стоит композитору. Плотный --glass-bg 0.96 даёт тот же вид дешевле. */ border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm), inset 0 1px 0 0 rgba(255,255,255,0.06); } /* ── Reveal-on-scroll — fade+rise. Pages add data-reveal to sections. ── */ [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); } [data-reveal].fm-revealed { opacity: 1; transform: translateY(0); } /* ── Reduced motion — respect user preference ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } [data-reveal] { opacity: 1; transform: none; } } /* ═══════════════════════════════════════════════════════════════════════ GLOBAL STAT-VALUE ENHANCEMENT — unifies fragmented stat classes (.pm-stat-value, .op-stat, .skill-stat, .ml-stat, .ed-stat-value, .fm-cl-stat-val, .fm-mon-value, .fm-rl-value, .summary-value) into premium tabular-numeric display with consistent weight/size. Zero per-page edits — all pages with these classes get upgraded. ═══════════════════════════════════════════════════════════════════════ */ .pm-stat-value, .op-stat, .skill-stat, .ml-stat, .ed-stat-value, .fm-cl-stat-val, .fm-mon-value, .fm-rl-value, .summary-value, .stat-pill, .plt-health-value, .fm-funnel-value { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } /* Stat label companions — consistent muted small caps style */ .pm-stat-label, .ed-stat-label, .fm-cl-stat-lbl { text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--text-xs); color: var(--text-tertiary); font-weight: var(--font-medium); } :root[data-density="compact"] .fm-conv-item { padding: var(--space-2); } /* ═══ Accent context tokens (WCAG-safe per theme) ═══ --accent-text: emerald COLORED TEXT on regular backgrounds --accent-on-accent: text ON emerald fill (buttons, active states) --accent-solid: emerald fill for buttons/badges --accent-solid-hover: darker hover state --accent-gradient: gradient for buttons/banners --accent-bg-subtle: very light tint (0.06-0.1) — hover backgrounds --accent-bg-medium: medium tint (0.12-0.15) — active backgrounds, icon chips --accent-bg-strong: strong tint (0.2-0.25) — focus rings, strong states --accent-border: emerald border --accent-glow: shadow/drop-shadow (0.3-0.4) --accent-glow-strong: intense glow (0.5-0.6) — active nav, pulse */ /* Dark theme accent tokens */ :root[data-theme="dark"] { --accent-text: #34d399; /* emerald-400, ratio 10.28 on dark bg ✅ */ --accent-on-accent: #ffffff; /* white on emerald gradient ✅ */ --accent-solid: #047857; /* emerald-700: белый текст 5.49:1 (был #059669, 3.77:1) */ --accent-solid-hover: #036c4d; /* hover darker: белый 6.45:1 */ --accent-gradient: linear-gradient(135deg, #047857 0%, #0e7490 100%); /* a11y: эндпоинты 5.49/5.36:1 */ --accent-bg-subtle: rgba(52, 211, 153, 0.08); --accent-bg-medium: rgba(52, 211, 153, 0.14); --accent-bg-strong: rgba(52, 211, 153, 0.25); --accent-border: rgba(52, 211, 153, 0.35); --accent-glow: rgba(52, 211, 153, 0.4); --accent-glow-strong: rgba(52, 211, 153, 0.6); } /* Light theme accent tokens */ :root[data-theme="light"] { --accent-text: #047857; /* emerald-700, ratio 5.24 on light ✅ */ --accent-on-accent: #ffffff; /* white on emerald ✅ */ --accent-solid: #047857; /* emerald-700: белый текст 5.49:1 (был #059669, 3.77:1) */ --accent-solid-hover: #036c4d; --accent-gradient: linear-gradient(135deg, #047857 0%, #0e7490 100%); /* a11y: эндпоинты 5.49/5.36:1 */ --accent-bg-subtle: rgba(5, 150, 105, 0.07); --accent-bg-medium: rgba(5, 150, 105, 0.13); --accent-bg-strong: rgba(5, 150, 105, 0.22); --accent-border: rgba(4, 120, 87, 0.4); --accent-glow: rgba(5, 150, 105, 0.3); --accent-glow-strong: rgba(5, 150, 105, 0.45); } /* ═══════════════════════════════════════════════════════════════════════ COMPATIBILITY ALIASES — страховка от «тихих отказов» var(--x) Имена ниже встречаются в шаблонах/JS-верстке, но не имели определения (свойство выпадало → фолбэк/inherit). tokens.css грузится ПЕРВЫМ, поэтому любое реальное определение этих имён в page-css всегда перебивает алиас. Проверено: ни одно имя не конфликтует с определениями выше в этом файле. ═══════════════════════════════════════════════════════════════════════ */ :root { --accent: var(--accent-solid); --color-error: var(--status-error); --color-success: var(--status-ok); --color-danger: var(--status-error); --color-info: var(--status-info); --color-blue: var(--status-info); --text-md: 1rem; --font-light: 300; --bg-input: var(--bg-inset); --status-ok-bg: rgba(16, 185, 129, 0.12); --status-warn-bg: rgba(245, 158, 11, 0.12); --status-error-bg: rgba(239, 68, 68, 0.12); --accent-bg-soft: var(--accent-bg-subtle); --panel: var(--bg-card-solid); --line: var(--border-primary); --muted: var(--text-tertiary); --danger: var(--status-error); }