/* ============================================================ Tachikoma — Theme scopes The system ships TWO themes. Dark is the default (declared across the token files on :root). Light re-maps the same semantic tokens to the refreshed palette, so any component that reads the tokens flips automatically. Usage: set data-theme="light" on , , or any wrapper. … ============================================================ */ /* Tokens that need a dark default beyond what colors.css already sets. */ :root { --tk-input-bg: rgba(10, 10, 15, 0.6); /* @kind color */ --tk-card-elev: rgba(30, 30, 50, 0.5); /* @kind color */ --tk-header-bg: rgba(10, 10, 15, 0.85); /* @kind color */ } [data-theme="light"] { /* ---- surfaces ---- */ --tk-bg: #f7f7fc; --tk-surface: #ffffff; --tk-surface-2: #f2f2fa; --tk-card: #ffffff; --tk-card-elev: #ffffff; --tk-input-bg: #ffffff; --tk-header-bg: rgba(255, 255, 255, 0.85); /* ---- accent (refreshed violet) ---- */ --tk-purple-700: #4a2fd6; --tk-purple-600: #5a3df5; /* primary action */ --tk-purple-500: #6a4cff; /* hover */ --tk-purple-400: #5a3df5; /* accent text / overlines (needs contrast on white) */ --tk-purple-300: #9c8cff; /* ---- text ---- */ --tk-text-heading: #111111; --tk-text-body: #3b3b3b; --tk-text-muted: #6e6e6e; --tk-text-subtle: #9595a8; --tk-text-faint: #b8b8c4; /* ---- borders & lines ---- */ --tk-border: rgba(90, 61, 245, 0.14); --tk-border-card: rgba(90, 61, 245, 0.16); --tk-border-strong: rgba(90, 61, 245, 0.4); --tk-border-neutral: #d4d4e0; --tk-grid-line: rgba(90, 61, 245, 0.06); /* ---- glass / fills ---- */ --tk-glass-fill: rgba(90, 61, 245, 0.04); --tk-glass-fill-soft: rgba(255, 255, 255, 0.75); --tk-purple-fill: rgba(90, 61, 245, 0.07); --tk-cyan-fill: rgba(106, 169, 248, 0.1); /* ---- ambience (lighter halo + softer shadows) ---- */ --tk-radial-purple: radial-gradient(circle at 50% 0%, rgba(154, 140, 255, 0.22) 0%, transparent 70%); /* @kind color */ --tk-shadow-card: 0 8px 30px rgba(17, 17, 17, 0.07); --tk-glow-purple: 0 0 60px rgba(90, 61, 245, 0.18); --tk-glow-purple-sm: 0 0 20px rgba(90, 61, 245, 0.18); --tk-glow-purple-lg: 0 0 40px rgba(90, 61, 245, 0.22); /* ---- gradients tuned for contrast on white ---- */ --tk-gradient-hero: linear-gradient(135deg, #5a3df5 0%, #6aa9f8 100%); /* @kind color */ --tk-gradient-purple: linear-gradient(135deg, #6a3dff 0%, #4f5cff 50%, #5a8cff 100%); /* @kind color */ --tk-gradient-cta: radial-gradient(ellipse 90% 120% at 10% -15%, rgba(154, 140, 255, 0.32) 0%, transparent 55%), radial-gradient(ellipse 90% 120% at 96% 115%, rgba(106, 169, 248, 0.3) 0%, transparent 55%), linear-gradient(135deg, #efeaff 0%, #eaf0fe 55%, #f2ecff 100%); /* @kind color */ --tk-cta-shadow: 0 24px 60px rgba(90, 61, 245, 0.16); /* @kind shadow */ }