/* ════════════════════════════════════════════════════════════════════════ clid-theme.css — Clid brand layer on top of Apple Liquid UI tokens ════════════════════════════════════════════════════════════════════════ This file overrides the --accent and a few glass-tint values from the canonical ALUI tokens.css so the Clid brand green runs through the system. Everything else (spacing grid, spring easings, radii, type scale, glass materials, components) comes straight from the canonical ALUI files unchanged. Load order in : 1. alui/tokens.css (canonical ALUI tokens — Apple system colors, 4pt grid, spring easings, radii, shadows) 2. clid-theme.css (THIS FILE — Clid brand accent + dark default) 3. alui/typography.css (SF Pro type scale) 4. alui/glass.css (glass-thin/regular/thick/chrome materials) 5. alui/animations.css (spring keyframes + entrance anims) 6. alui/components.css (btn, card, nav-bar, sheet, list, toggle, etc.) 7. landing.css (landing-page-specific layout — uses ONLY tokens from the layers above, no new tokens) ════════════════════════════════════════════════════════════════════════ */ /* ─── Dark mode is the Clid default ───────────────────────────────────────── ALUI's tokens.css uses `@media (prefers-color-scheme: dark)` to switch. We override that: Clid's landing page defaults to dark, with a manual toggle via . The :root block below re-declares the dark-mode token values so they apply regardless of the user's OS preference. */ :root { /* Clid brand accent — overrides ALUI's --accent: var(--system-blue) */ --accent: #00d97e; --accent-bright: #00e88a; --accent-deep: #00b86b; --accent-pressed: #00b86b; /* Clid brand gradient (used on headline text, primary CTAs, flywheel core) */ --clid-grad: linear-gradient(120deg, #00e88a 0%, #12c8b0 46%, #3b82f6 100%); --clid-grad-soft: linear-gradient(120deg, rgba(0,232,138,0.14), rgba(59,130,246,0.14)); /* Dark backgrounds — slightly cooler than ALUI's pure #000000 to match the existing Clid core.css palette (#08090c). */ --system-background: #08090c; --system-background-secondary: #121419; --system-background-tertiary: #1b1e25; /* Dark labels — same as ALUI's dark mode */ --label-primary: rgba(255, 255, 255, 0.92); --label-secondary: rgba(235, 235, 245, 0.60); --label-tertiary: rgba(235, 235, 245, 0.30); --label-quaternary: rgba(235, 235, 245, 0.16); /* Dark fills */ --fill-primary: rgba(120, 120, 128, 0.36); --fill-secondary: rgba(120, 120, 128, 0.32); --fill-tertiary: rgba(118, 118, 128, 0.24); --fill-quaternary: rgba(118, 118, 128, 0.18); /* Dark separators */ --separator: rgba(84, 84, 88, 0.6); --separator-opaque: #38383A; /* Dark glass — brand-tinted (Clid green tint, not neutral gray per §2 law) */ --glass-tint: 18, 20, 25; --glass-border: rgba(255, 255, 255, 0.10); --glass-highlight: rgba(255, 255, 255, 0.18); --glass-shadow: rgba(0, 0, 0, 0.50); --glass-brand-tint: rgba(0, 217, 126, 0.06); --glass-brand-tint-hover: rgba(0, 217, 126, 0.12); /* Dark shadows */ --shadow-1: 0 1px 2px rgba(0,0,0,0.4); --shadow-2: 0 4px 12px rgba(0,0,0,0.5); --shadow-3: 0 12px 32px rgba(0,0,0,0.6); color-scheme: dark; } /* ─── Light mode removed in Rev 3 ────────────────────────────────────────── Per human direction: "I don't like the light mode." The theme toggle button is removed from the HTML, the toggle logic is removed from landing.js, and this file no longer declares light-mode overrides. Clid is premium dark only. If light mode is ever needed again, restore this block and re-add the toggle. */ /* ─── Brand-tinted glass variants ─────────────────────────────────────────── ALUI's .glass-* classes use rgba(var(--glass-tint), α) which gives neutral gray glass. We add a thin brand-tinted halo via box-shadow on .glass-regular and .glass-chrome so the Clid green subtly runs through every elevated surface, per §2 of the standing build law. */ .glass-regular, .glass-thick, .glass-chrome { box-shadow: 0 1px 0 var(--glass-highlight) inset, 0 8px 24px var(--glass-shadow), 0 0 0 1px var(--glass-brand-tint); }