/* ============================================================ CLOUT THEME · DESIGN TOKENS Ported from the CLOUT Design System. Dark is default; light is applied automatically via the attribute that the inline init script (header.php) sets before paint. Author every template against these semantic vars — never raw hex. ============================================================ */ :root { /* --- Brand primitives --- */ --clout-black: #0A0A0B; --clout-true-black: #000000; --clout-white: #FFFFFF; /* Neutral ramp: graphite → charcoal → silver */ --ink-950: #0A0A0B; --ink-900: #121214; --ink-800: #1A1A1D; --ink-700: #242427; --ink-600: #34343A; --ink-500: #4A4A52; --ink-400: #6E6E78; --ink-300: #9A9AA4; --ink-200: #C4C8CC; --ink-100: #E4E6E9; --ink-050: #F3F4F5; /* Accent — Electric Lime */ --lime-500: #CCFF00; --lime-600: #B8E600; --lime-400: #D8FF3D; --lime-glow: rgba(204, 255, 0, 0.35); /* Reflective Silver */ --silver-500: #C4C8CC; --silver-400: #D9DCDF; --silver-600: #9DA2A7; /* Neon Red — urgency / drops only */ --red-500: #FF1F3C; --red-600: #E50032; --red-400: #FF5570; /* --- Semantic surfaces (dark-first) --- */ --surface-base: var(--clout-black); --surface-raised: var(--ink-900); --surface-panel: var(--ink-800); --surface-card: var(--ink-700); --surface-inset: var(--ink-950); /* Text */ --text-primary: var(--clout-white); --text-secondary: var(--ink-300); --text-tertiary: var(--ink-400); --text-on-lime: var(--clout-black); --text-accent: var(--lime-500); /* Lines & borders */ --border-subtle: var(--ink-600); --border-strong: var(--ink-500); --border-accent: var(--lime-500); --hairline: rgba(255, 255, 255, 0.08); /* Action / status / focus */ --action-primary: var(--lime-500); --action-primary-hover: var(--lime-400); --action-primary-press: var(--lime-600); --action-fg: var(--clout-black); --status-urgent: var(--red-500); --focus-ring: var(--lime-500); /* Theme-flipping component surfaces */ --product-media: linear-gradient(160deg, #202024 0%, #131316 55%, #0d0d0f 100%); --header-bg: rgba(10, 10, 11, 0.82); --header-border: rgba(255, 255, 255, 0.08); --crown-watermark-opacity: 0.07; /* Type */ --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif; --font-body: "Archivo", system-ui, -apple-system, sans-serif; --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace; /* Radii — sharp & angular */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px; /* Shadows — deep dark world */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.5); --shadow-md: 0 6px 20px rgba(0,0,0,0.55); --shadow-lg: 0 20px 50px rgba(0,0,0,0.6); --shadow-card: 0 10px 30px rgba(0,0,0,0.45); /* Glows / focus */ --glow-lime: 0 0 0 1px rgba(204,255,0,0.5), 0 0 24px rgba(204,255,0,0.35); --glow-lime-soft: 0 0 30px rgba(204,255,0,0.22); --glow-red-soft: 0 0 30px rgba(255,31,60,0.30); --ring: 0 0 0 3px rgba(204,255,0,0.45); /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-sharp: cubic-bezier(0.2, 0, 0, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; --press-scale: 0.97; /* Overlays */ --scrim: rgba(0,0,0,0.72); /* Layout */ --maxw: 1320px; } :root[data-theme="dark"] { color-scheme: dark; } /* ---- LIGHT THEME ---- */ :root[data-theme="light"] { color-scheme: light; --surface-base: #F4F5F6; --surface-raised: #FFFFFF; --surface-panel: #ECEEF0; --surface-card: #FFFFFF; --surface-inset: #E7E9EB; --text-primary: #0A0A0B; --text-secondary: #55555E; --text-tertiary: #84848E; --border-subtle: #E2E4E7; --border-strong: #C4C8CC; --hairline: rgba(10, 10, 11, 0.10); --product-media: linear-gradient(160deg, #ECEEF0 0%, #DFE2E5 55%, #D2D6DA 100%); --header-bg: rgba(255, 255, 255, 0.82); --header-border: rgba(10, 10, 11, 0.10); --crown-watermark-opacity: 0.06; --shadow-sm: 0 1px 2px rgba(20, 22, 30, 0.08); --shadow-md: 0 6px 20px rgba(20, 22, 30, 0.10); --shadow-lg: 0 20px 50px rgba(20, 22, 30, 0.16); --shadow-card: 0 8px 26px rgba(20, 22, 30, 0.09); --scrim: rgba(10, 10, 11, 0.45); } /* No-JS fallback: follow OS appearance */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --surface-base: #F4F5F6; --surface-raised: #FFFFFF; --surface-panel: #ECEEF0; --surface-card: #FFFFFF; --surface-inset: #E7E9EB; --text-primary: #0A0A0B; --text-secondary: #55555E; --text-tertiary: #84848E; --border-subtle: #E2E4E7; --border-strong: #C4C8CC; --hairline: rgba(10,10,11,0.10); --product-media: linear-gradient(160deg, #ECEEF0 0%, #DFE2E5 55%, #D2D6DA 100%); --header-bg: rgba(255,255,255,0.82); --header-border: rgba(10,10,11,0.10); --scrim: rgba(10,10,11,0.45); } }