on the palettes.html preview so each card can carry its own scope without nesting tags (which browsers ignore). Layout, type scale, radii, and component shapes are unchanged. ────────────────────────────────────────────────────────────────── */ /* 1. Midnight Botanical — deep ink, lime-mint accent */ [data-palette="midnight"] { --bg: oklch(14% 0.025 285); --surface: oklch(17% 0.025 285); --surface-2: oklch(21% 0.022 285); --fg: oklch(96% 0.01 95); --fg-2: oklch(86% 0.018 95); --muted: oklch(70% 0.022 285); --border: oklch(32% 0.025 285); --border-soft: oklch(26% 0.022 285); --accent: oklch(82% 0.18 145); --accent-on: oklch(14% 0.025 285); --accent-soft: color-mix(in oklch, var(--accent) 14%, transparent); --fg-soft: color-mix(in oklch, var(--fg) 6%, transparent); --scrim: color-mix(in oklch, #000 60%, transparent); --shadow-pop: 0 1px 0 var(--border-soft), 0 12px 32px -16px color-mix(in oklch, var(--accent) 28%, transparent); --shadow-drawer: -8px 0 32px rgba(0, 0, 0, 0.55); --success: oklch(78% 0.16 150); --warn: oklch(82% 0.16 80); --danger: oklch(72% 0.20 25); --success-soft: color-mix(in oklch, var(--success) 14%, transparent); --warn-soft: color-mix(in oklch, var(--warn) 18%, transparent); --danger-soft: color-mix(in oklch, var(--danger) 14%, transparent); --band-bg-1: oklch(18% 0.04 285); --band-bg-2: oklch(12% 0.04 285); --band-fg: oklch(96% 0.01 95); --band-fg-soft: rgba(255, 255, 255, 0.78); --band-fg-muted: rgba(255, 255, 255, 0.9); --band-accent: oklch(82% 0.18 145); --band-chip-bg: rgba(255, 255, 255, 0.06); --band-chip-fg: oklch(92% 0.10 145); --focus-ring: 0 0 0 2px var(--accent); --focus-purple: oklch(82% 0.18 145); } /* 2. Solar Editorial — cream paper, oxblood ink, mustard accent */ [data-palette="solar"] { --bg: oklch(96% 0.018 80); --surface: oklch(98% 0.014 80); --surface-2: oklch(94% 0.020 80); --fg: oklch(22% 0.06 25); --fg-2: oklch(32% 0.06 25); --muted: oklch(50% 0.04 40); --border: oklch(82% 0.025 70); --border-soft: oklch(90% 0.020 70); --accent: oklch(54% 0.20 28); --accent-on: oklch(98% 0.014 80); --accent-soft: color-mix(in oklch, var(--accent) 10%, transparent); --fg-soft: color-mix(in oklch, var(--fg) 4%, transparent); --scrim: color-mix(in oklch, var(--fg) 40%, transparent); --shadow-pop: 0 1px 0 var(--border-soft), 0 8px 24px -14px color-mix(in oklch, var(--fg) 18%, transparent); --shadow-drawer: -8px 0 24px color-mix(in oklch, var(--fg) 12%, transparent); --success: oklch(48% 0.14 145); --warn: oklch(72% 0.16 75); --danger: oklch(50% 0.22 25); --success-soft: color-mix(in oklch, var(--success) 14%, transparent); --warn-soft: color-mix(in oklch, var(--warn) 18%, transparent); --danger-soft: color-mix(in oklch, var(--danger) 14%, transparent); --band-bg-1: oklch(20% 0.06 25); --band-bg-2: oklch(14% 0.06 25); --band-fg: oklch(96% 0.018 80); --band-fg-soft: rgba(255, 255, 255, 0.80); --band-fg-muted: rgba(255, 255, 255, 0.92); --band-accent: oklch(72% 0.16 75); --band-chip-bg: rgba(255, 255, 255, 0.08); --band-chip-fg: oklch(96% 0.018 80); --focus-ring: 0 0 0 2px var(--accent); --focus-purple: oklch(72% 0.16 75); } /* 3. Carbon Terminal — true black, electric cyan, monospace headings */ [data-palette="carbon"] { --bg: oklch(8% 0.005 220); --surface: oklch(11% 0.008 220); --surface-2: oklch(14% 0.010 220); --fg: oklch(94% 0.01 220); --fg-2: oklch(80% 0.018 220); --muted: oklch(60% 0.018 220); --border: oklch(24% 0.018 220); --border-soft: oklch(18% 0.014 220); --accent: oklch(84% 0.16 195); --accent-on: oklch(8% 0.005 220); --accent-soft: color-mix(in oklch, var(--accent) 16%, transparent); --fg-soft: color-mix(in oklch, var(--fg) 6%, transparent); --scrim: color-mix(in oklch, #000 70%, transparent); --shadow-pop: 0 0 0 1px var(--accent-soft), 0 0 24px -4px color-mix(in oklch, var(--accent) 30%, transparent); --shadow-drawer: -8px 0 24px rgba(0, 0, 0, 0.7); --success: oklch(80% 0.18 150); --warn: oklch(82% 0.18 80); --danger: oklch(72% 0.22 20); --success-soft: color-mix(in oklch, var(--success) 14%, transparent); --warn-soft: color-mix(in oklch, var(--warn) 18%, transparent); --danger-soft: color-mix(in oklch, var(--danger) 14%, transparent); --font-display: "JetBrains Mono", "CohereMono", ui-monospace, "SF Mono", Menlo, monospace; --band-bg-1: oklch(8% 0.005 220); --band-bg-2: oklch(5% 0.005 220); --band-fg: oklch(94% 0.01 220); --band-fg-soft: rgba(255, 255, 255, 0.72); --band-fg-muted: rgba(255, 255, 255, 0.88); --band-accent: oklch(84% 0.16 195); --band-chip-bg: oklch(16% 0.012 220); --band-chip-fg: oklch(84% 0.16 195); --focus-ring: 0 0 0 2px var(--accent); --focus-purple: oklch(84% 0.16 195); } /* ────────────────────────────────────────────────────────────────── Demo page (palettes.html) — show all three side by side with a light/dark toggle and a "back to index" link. Lives in this file so a single stylesheet swap shows the full preview. ────────────────────────────────────────────────────────────────── */ .palette-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: var(--gap-lg); padding: var(--gap-xl) var(--gutter); max-width: var(--container); margin: 0 auto; } .palette-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; } .palette-card header { padding: var(--gap-md) var(--gap-lg); border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm); } .palette-card header h2 { margin: 0; font-size: var(--fs-h3); font-weight: 600; } .palette-card header .swatches { display: inline-flex; gap: 6px; } .palette-card header .swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--border-soft); } .palette-card .preview { padding: var(--gap-md) var(--gap-lg); display: flex; flex-direction: column; gap: var(--gap-sm); } .palette-card .preview .row { display: flex; align-items: center; gap: var(--gap-sm); flex-wrap: wrap; } .palette-card footer { padding: var(--gap-md) var(--gap-lg); border-top: 1px solid var(--border-soft); display: flex; justify-content: space-between; align-items: center; gap: var(--gap-sm); font-size: var(--fs-xs); color: var(--muted); } .palette-card footer a { color: var(--accent); text-decoration: none; font-weight: 500; } .palette-card footer a:hover { text-decoration: underline; } .palette-card .btn-row { display: inline-flex; gap: var(--gap-sm); flex-wrap: wrap; } .palette-card .stat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border-soft); font-family: var(--font-mono); font-size: var(--fs-xs); } .palette-card .stat .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }