/* ========================================================================= Lizensa theme — complete tenant override This file is loaded ONLY for Lizensa tenants (via layout.tsx ). It overrides globals.css :root defaults for ALL three token families that Lizensa pages consume. Each family uses its own format, set once, never aliased across families. Three layers: L1. Brand primitives — --lz-* OKLCH values, radii, and elevations. L2. Semantic aliases — legacy surface names map to one palette source. L3. Render bindings — shadcn HSL triplets and TweakCN variables preserve today's rendering contracts while component migrations proceed. RULES FOR FUTURE EDITORS: - Each variable is set exactly ONCE, in its canonical format. - NEVER alias --lz-* to --accent / --background / etc. Formats differ. - New --lz-* variables: bare HSL triplet (e.g. "38 92% 50%"). - New legacy oklch variables: oklch() notation (e.g. "oklch(0.74 0.16 70)"). - New shadcn variables: bare HSL triplet. ========================================================================= */ :root { /* ==================================================================== 1. SHADCN HSL TOKENS — bare triplets, consumed via hsl(var(--*)) These override the Distivo defaults from globals.css @layer base. ==================================================================== */ --primary: 186 67% 23%; --primary-foreground: 0 0% 100%; --accent-hsl: 38 92% 50%; /* amber — shadcn accent */ --accent-foreground: 222 47% 11%; --background: 40 33% 96%; /* warm cream */ --card: 0 0% 100%; --card-foreground: 186 30% 15%; --popover: 0 0% 100%; --popover-foreground: 186 30% 15%; --foreground: 186 30% 15%; --muted: 40 22% 92%; --muted-foreground: 186 18% 38%; --secondary: 40 22% 92%; --secondary-foreground: 186 30% 15%; --border: 40 20% 86%; --input: 40 20% 88%; --ring: 186 67% 23%; --success: 155 55% 30%; --success-foreground: 40 33% 96%; --warning: 32 90% 48%; --warning-foreground: 222 47% 11%; --info: 195 70% 35%; --info-foreground: 40 33% 96%; /* ==================================================================== 2. LEGACY TWEAKCN TOKENS — oklch() raw, consumed via var(--*) Used by globals.css shared rules (header, footer, chrome, buttons, checkout shell, catalog filters). --accent is oklch here because globals.css uses var(--accent) directly (not wrapped in hsl()). ==================================================================== */ --bg-0: oklch(0.96 0.02 80); --bg-1: oklch(0.97 0.02 80); --bg-2: oklch(1 0 0); --bg-3: oklch(0.93 0.02 80); --ink-0: oklch(0.22 0.04 200); --ink-1: oklch(0.34 0.03 200); --ink-2: oklch(0.46 0.025 200); --ink-3: oklch(0.55 0.02 200); --ink-4: oklch(0.70 0.015 200); /* Accent ramp — warm amber, not Distivo blue. NOTE: --accent is oklch() because 55+ globals.css rules consume it as var(--accent) directly. For hsl() wrapping (shadcn/Tailwind), use --accent-hsl above. NEVER mix the two. */ --accent: oklch(0.74 0.16 70); --accent-bright: oklch(0.68 0.18 70); --accent-ink: oklch(0.18 0.04 200); --accent-glow: oklch(0.74 0.16 70 / 0.18); --accent-soft: oklch(0.74 0.16 70 / 0.35); --line: oklch(0.86 0.02 80); --line-strong: oklch(0.78 0.02 80); --line-soft: oklch(0.92 0.02 80); /* ==================================================================== 3. LIZENSA-BRAND TOKENS — oklch, consumed via var(--lz-*) and color-mix(in oklch, var(--lz-*) N%, transparent). Same format as family 2 (TweakCN). These are Lizensa-specific names that don't conflict with shared tokens. Future Lizensa pages should use these instead of repurposing --accent/etc. ==================================================================== */ --lz-cream: oklch(0.9733 0.0070 88.6); --lz-card: oklch(1.0000 0.0000 89.9); --lz-ink: oklch(0.2662 0.0240 204.7); --lz-ink-2: oklch(0.4887 0.0343 204.1); --lz-ink-3: oklch(0.5200 0.0350 205.4); /* accessible supporting ink: ~5:1 on cream */ --lz-line: oklch(0.9015 0.0158 86.4); --lz-line-strong: oklch(0.8442 0.0235 84.6); --lz-teal: oklch(0.4299 0.0671 206.4); --lz-teal-2: oklch(0.5304 0.0809 206.2); --lz-amber: oklch(0.7704 0.1646 70.7); --lz-amber-deep: oklch(0.5500 0.1300 59.7); /* accessible amber ink: ~4.7:1 on cream */ --lz-amber-soft: oklch(0.9591 0.0345 82.9); --lz-radius: 18px; --lz-radius-lg: 24px; --lz-radius-pill: 9999px; --lz-shadow-sm: 0 1px 2px hsl(186 30% 15% / 0.04), 0 4px 12px hsl(38 92% 50% / 0.04); --lz-shadow-md: 0 1px 2px hsl(186 30% 15% 0.04), 0 8px 24px hsl(38 92% 50% / 0.06); /* Decisive action slot: Lizensa amber, independent of Distivo primary. */ --action: var(--lz-amber); --action-foreground: var(--lz-ink); /* L2 semantic compatibility aliases. Component-local files retain only layout values, never duplicate the Lizensa palette. */ --lzh-text: hsl(186 30% 13%); --lzh-muted: hsl(186 18% 38%); --lzh-subtle: hsl(186 18% 52%); --lzh-teal: hsl(186 67% 23%); --lzh-amber: hsl(38 92% 50%); --lzh-amber-soft: hsl(38 92% 50% / 0.18); --lzh-hover: hsl(40 22% 92%); --lzh-border: hsl(40 22% 86%); --lzh-border-light: hsl(40 22% 91%); --lzh-bg: hsl(40 33% 96%); --lzh-bg-elevated-2: hsl(40 33% 98%); --lzh-elevated: hsl(40 33% 99%); --lzh-glass-halo: hsl(186 67% 23% / 0.12); --lzh-shadow-inset: inset 0 1px 0 hsl(0 0% 100% / 0.5); --lzh-shadow-sticky: 0 1px 0 hsl(40 22% 86%), 0 18px 44px -34px hsl(186 30% 13% / 0.5); --lzh-trust-underline: linear-gradient( to right, transparent 0, hsl(38 92% 50% / 0.5) 12%, hsl(38 92% 50% / 0.5) 88%, transparent 100% ); --lzh-panel-gradient: linear-gradient(135deg, hsl(40 38% 97%), hsl(40 30% 99%)); --lzh-feature-gradient: radial-gradient(circle at top left, hsl(32 90% 58% / 0.16), transparent 44%), linear-gradient(160deg, hsl(40 42% 96%), hsl(186 38% 96%)); --lzh-scrollbar-thumb: hsl(186 36% 36% / 0.24); --lzh-mega-width: 1080px; --lzh-mega-top: 100px; --lzh-mega-min-height: 420px; --lzh-mega-max-height: min(72vh, 620px); /* Commerce Finder search geometry — SB-5084. Paint continues to use the shared lzh/lz palette; only search-specific layout/elevation lives here. */ --lzs-dialog-width: 1040px; --lzs-dialog-max-height: min(78vh, 720px); --lzs-input-height: 52px; --lzs-best-match-min-height: 116px; --lzs-result-row-height: 64px; --lzs-rail-width: 288px; --lzs-mobile-footer-height: 68px; --lzs-shadow-dialog: 0 32px 90px -36px hsl(186 48% 18% / 0.42), 0 12px 30px -22px hsl(38 72% 34% / 0.24); --lzs-highlight: hsl(186 67% 23% / 0.14); --lzh-amber-action: hsl(32 95% 32%); --lzh-amber-action-hover: hsl(32 95% 26%); --lzh-amber-badge-text: hsl(32 85% 34%); --lzh-shadow-drawer: 0 24px 80px -32px hsl(186 48% 18% / 0.35); --lzh-shadow-mega: 0 24px 80px -32px hsl(186 48% 18% / 0.32), 0 10px 24px -18px hsl(35 55% 38% / 0.22); --lzh-shadow-category: 0 1px 0 hsl(40 22% 86% / 0.4); --lzh-shadow-product: 0 1px 0 hsl(40 22% 86% / 0.35); --lzh-shadow-product-hover: 0 12px 26px -20px hsl(186 48% 18% / 0.5); --lzh-shadow-cta: 0 10px 22px -14px hsl(186 48% 24% / 0.65); /* Verified Software Index chrome — SB-5087. */ --lzh-chrome-max-width: var(--sf-page-max-chrome); --lzh-chrome-panel-radius: 20px; --lzh-chrome-panel-border: hsl(40 22% 86% / 0.72); --lzh-chrome-panel-shadow: 0 28px 72px -34px hsl(186 48% 18% / 0.34), 0 10px 24px -20px hsl(38 72% 34% / 0.2); --lzh-chrome-beam: linear-gradient(90deg, var(--lzh-teal), var(--lzh-amber)); --lzh-chrome-beam-soft: linear-gradient(90deg, hsl(186 67% 23% / 0.2), hsl(38 92% 50% / 0.28)); --lzh-chrome-open-duration: 160ms; --lzh-chrome-row-hover: hsl(186 40% 94% / 0.72); --lzh-footer-dispatch-bg: hsl(186 67% 18%); --lzh-footer-dispatch-text: hsl(40 33% 98%); --lzf-text: var(--lzh-text); --lzf-text-muted: var(--lzh-muted); --lzf-border: var(--lzh-border); --lzf-amber: var(--lzh-amber); --lzf-teal: var(--lzh-teal); --lzf-hover: var(--lzh-hover); --lzpdp-teal: hsl(186 67% 23%); --lzpdp-teal-deep: hsl(186 67% 18%); --lzpdp-teal-tint: hsl(186 45% 96%); --lzpdp-amber: hsl(38 92% 50%); --lzpdp-amber-deep: hsl(32 88% 44%); --lzpdp-danger: hsl(0 75% 50%); --lzpdp-ink: hsl(186 30% 13%); --lzpdp-ink-soft: hsl(186 18% 38%); --lzpdp-cream: hsl(40 33% 96%); --lzpdp-cream-raised: hsl(40 33% 98%); --lzpdp-surface: hsl(0 0% 100%); --lzpdp-line: hsl(40 22% 86%); --lzpdp-line-soft: hsl(40 22% 92%); --lzpdp-star-fill: var(--lzpdp-amber); --lzpdp-star-empty: hsl(40 22% 85%); --lzr-bg: hsl(40 33% 96%); --lzr-bg-alt: hsl(40 25% 93%); --lzr-text: hsl(186 30% 13%); --lzr-text-muted: hsl(186 25% 35%); --lzr-accent: var(--lzr-accent-color, var(--lzh-teal)); --lzr-accent-soft: hsl(from var(--lzr-accent) h s l / 0.12); --lzr-card-bg: hsl(0 0% 100% / 0.7); --lzr-card-border: hsl(0 0% 100% / 0.4); --lzcard-accent: var(--lzpdp-teal); --lzcard-accent-soft: hsl(158 64% 38%); --lzcard-border: hsl(158 40% 86%); --lzcard-letter-color: var(--lzpdp-teal); --lzc-space: 1.5rem; --touch-min: 44px; --gradient-accent: linear-gradient(135deg, var(--ink-0) 0%, var(--accent-bright) 100%); /* --------------------------------------------------------------------------- CHROME PRIMITIVE ALIASES — added in the T7.4 chrome commit so the kit's header + footer can bind tokens instead of raw hsl(...) literals (the design-tokens spec's REQ-TOKENS-NO-RAW-HEX-OUTSIDE-TOKEN-FILES scenario bans raw literals outside token files). Each value is a 1:1 port of the legacy `components/lizensa-chrome/ lizensa-chrome.css` values, so adopting these aliases in chrome is zero rendered visual change (REQ-TOKENS-NO-VISUAL-CHANGE-IN-PHASE-0). Two CSS-var composition caveats: - `--lzh-ink-a45` uses `hsl(from var(--lzh-text) h s l / 0.45)` so it tracks the same HSL triplet the shadow geometry needs; OK in evergreen browsers (Tailwind arbitrary `hsl(from var(--*))` is parsed by postcss-preset-env when the project's autoprefixer chain runs, but for the chrome shadow we just bind the literal shape — see `SURFACE.stickyHeaderScrolled` in packages/ds-lizensa/src/chrome/utils.ts. The alias remains the canonical store; consumers that don't need alpha may substitute.) - `--lzh-bg-soft` is the 97% cream tint the payment strip and trust-chip row used to paint directly. Distinct from `--lzh-elevated` (99%) by design — keeping both avoids accidental tint drift across surfaces. --------------------------------------------------------------------------- */ /* Soft cream tint for the payment strip + trust chip rows (was the raw `hsl(40 33% 97%)` the legacy chrome painted directly). */ --lzh-bg-soft: hsl(40 33% 97%); /* Footer surface body background — the deeper cream wash that sits behind the four-column grid (legacy `hsl(40 30% 94%)`). Distinct from --lzh-bg-soft (payment/trust strip wash) and --lzh-bg (sticky-header cream) on purpose so a recolor doesn't touch all three at once. */ --lzh-footer-bg: hsl(40 30% 94%); /* Hover amber for column / sibling-store links — the warm amber you see on hover in the legacy footer (35% lightness variant). The base --lzh-amber (50%) stays for non-hover accents. */ --lzh-amber-deep: hsl(38 92% 35%); /* Hover teal for the newsletter button — darker than the base --lzh-teal (23%) so the pressed state reads as an active call. Distinct from --lzpdp-teal-deep (18%, PDP chrome intent). */ --lzh-teal-deep: hsl(186 67% 16%); /* Ink alpha-45 — the inner halo of the sticky-header shadow once the surface is scrolled. Tracks `--lzh-text` so a recolor reflows. */ --lzh-ink-a45: hsl(186 30% 13% / 0.45); /* Composed sticky-surface shadow (was the inline arbitrary value in `SURFACE.stickyHeaderScrolled`). Both layers carry one of the two tokens above + a warm `--lzh-amber` accent; binding them here means a brand recolor doesn't require touching chrome/utils.ts. */ --lzh-shadow-scrolled: 0 1px 0 hsl(40 22% 86%), 0 18px 44px -34px var(--lzh-ink-a45); } /* Dark-mode overrides — Lizensa is locked to light by layout.tsx, but if a user force-toggles via browser extension, these keep shadcn tokens reasonable instead of falling back to Distivo's dark palette. */ .dark { --primary: 174 78% 35%; --primary-foreground: 0 0% 100%; --accent-hsl: 38 92% 55%; --accent-foreground: 222 47% 11%; } @media (prefers-reduced-motion: reduce) { :root { --lzh-chrome-open-duration: 0ms; } }