/** * module: css/theme.css * stage: web-ui/unified-tokens (ChronoTheme v4, Paket C1) * inputs: [data-theme=light|dark] on (set by header bootstrap + chrono_theme.js) * outputs: semantic color classes consumed by shell + index + progress partials * contracts: * PRE: header.php links this file with filemtime version (anti-cache). * POST: .ink/.ink-2/.ink-3 resolve to --text-* vars so markup needs no per-mode patch. * INVARIANT: .island-dark subtrees always render dark cinematic (excluded from light remap). * INVARIANT: dynamic values use single --p hook (progress width); no other inline style in migrated files. */ /* C0 token inventory (hard colors mapped from shell+index+progress partials): surface: #020617/#0f172a (dark) -> #ffffff/#f1f5f9 (light) ink 3 levels: #f8fafc/#94a3b8/#64748b -> #0f172a/#475569/#64748b hairline: rgba(255,255,255,.1) -> rgba(15,23,42,.12) status/brand: Tailwind emerald/amber/rose/cyan + --primary-* chrono hue */ :root { --surface: rgba(30, 41, 59, 0.9); --surface-2: rgba(15, 23, 42, 0.8); --surface-3: rgba(15, 23, 42, 0.6); --ink: #f8fafc; --ink-2: #94a3b8; --ink-3: #64748b; --hairline: rgba(255, 255, 255, 0.1); } [data-theme="light"] { --surface: rgba(255, 255, 255, 0.94); --surface-2: rgba(255, 255, 255, 0.92); --surface-3: rgba(241, 245, 249, 0.9); --ink: #0f172a; --ink-2: #475569; --ink-3: #64748b; --hairline: rgba(15, 23, 42, 0.12); } /* Semantic surface + ink (both modes, no per-mode markup patch). */ .surface { background: var(--surface); } .surface-2 { background: var(--surface-2); } .ink { color: var(--ink); } .ink-2 { color: var(--ink-2); } .ink-3 { color: var(--ink-3); } .hairline { border-color: var(--hairline); } .hairline-t { border-top-color: var(--hairline); } /* Intentional dark islands: hero, banner, modal, video, chat. Never remapped. */ .island-dark, [data-island-dark] { --surface: rgba(2, 6, 23, 0.85); --ink: #f8fafc; --ink-2: #cbd5e1; --ink-3: #94a3b8; --hairline: rgba(255, 255, 255, 0.12); color-scheme: dark; } /* Brand button + chips (replaces hardcoded gradients in migrated markup). */ .btn-brand { background: linear-gradient(135deg, var(--primary-600), var(--primary-700)); color: #fff; } .chip { border: 1px solid var(--hairline); border-radius: 9999px; } /* Sidebar helpers (replaces inline style in header.php shell). */ .sidebar-vip { color: #a78bfa; } .sidebar-danger { color: #f87171; } .sidebar-user-icon { color: var(--accent-amber); } .sidebar-user-label { font-size: 12px; color: var(--text-secondary); flex: 1; } .admin-badge-tight { margin-left: 4px; } .sidebar-login-icon { width: 18px; text-align: center; } /* Hue engine runs fully auto (chrono); no manual hue UI remains. */ /* Hero progress bar: single --p hook (0-100 continuous; preset classes absurd here). */ .hero-bar-fill { width: var(--p, 0%); } /* ── Unified hue-follow + light-remap pack (ChronoTheme v4.2) ───────────── PRE: chrono_theme.js sets --primary-*/--accent-cyan + data-theme on . POST: sidebar + game hero tint follow hue; light mode has no white-on-white. INVARIANT: page partials keep dark markup; all light remaps live here. INVARIANT: !important only to beat header.php