/** * skin.css — data-skin attribute switcher for the 21 marketing-token skins * * Bridges style-router.js theme slugs → marketing-tokens.css [data-genre][data-modifier] * selectors by setting data-genre and data-modifier on via a single * data-skin="" attribute that build-runner writes to the template. * * Usage: build-runner.mjs writes * * * The template's root layout sets both attrs from CONTENT.skin_genre + CONTENT.skin_modifier. * marketing-tokens.css selectors [data-genre][data-modifier] then activate the correct skin. * * This file provides the mapping table as CSS custom properties on [data-skin] * so a future layout can read them if needed, and ensures all 21 slugs are * explicitly represented for grep-ability. * * NOTE: Skin tokens come from marketing-tokens.css (single source of truth). * This file does NOT redeclare token values — it only declares the data-skin * attribute selectors for discoverability and forwards the genre+modifier pair. * * Pop, Folk, Hip-Hop, World mapping notes (see intake-to-content.mjs SLUG_TO_SKIN_ATTRS): * The THEME_MAP slug modifiers for pop, folk, hiphop, world diverge from the * marketing-tokens modifier names. The bridge mapping in intake-to-content.mjs * provides best-fit assignments. Barnaby must review before Phase 3. */ /* ─── Jazz ───────────────────────────────────────────────────────────────────── */ [data-skin="jazz-ecm-editorial"] { --skin-slug: "jazz-ecm-editorial"; } [data-skin="jazz-bluenote-modern"] { --skin-slug: "jazz-bluenote-modern"; } [data-skin="jazz-studio-notebook"] { --skin-slug: "jazz-studio-notebook"; } /* ─── Classical ───────────────────────────────────────────────────────────────── */ [data-skin="classical-concert-hall"] { --skin-slug: "classical-concert-hall"; } [data-skin="classical-nordic-chamber"] { --skin-slug: "classical-nordic-chamber"; } [data-skin="classical-conservatory-contemporary"] { --skin-slug: "classical-conservatory-contemporary"; } /* ─── Rock ────────────────────────────────────────────────────────────────────── */ [data-skin="rock-heavy-modern"] { --skin-slug: "rock-heavy-modern"; } [data-skin="rock-punk-hardcore-loud"] { --skin-slug: "rock-punk-hardcore-loud"; } [data-skin="rock-indie-editorial"] { --skin-slug: "rock-indie-editorial"; } /* ─── Pop / Electronic ───────────────────────────────────────────────────────── THEME_MAP slugs: digital-clean, dark-synthetic, pastel-editorial marketing-tokens CSS: editorial-indie-pop, club-producer-minimal, hyperpop-brat Best-fit bridge in intake-to-content.mjs — pending Barnaby review. ─────────────────────────────────────────────────────────────────────────────── */ [data-skin="pop-digital-clean"] { --skin-slug: "pop-digital-clean"; } [data-skin="pop-dark-synthetic"] { --skin-slug: "pop-dark-synthetic"; } [data-skin="pop-pastel-editorial"] { --skin-slug: "pop-pastel-editorial"; } /* ─── Folk / Singer-Songwriter ───────────────────────────────────────────────── THEME_MAP slugs: warm-roots, indie-pastoral, americana-raw marketing-tokens CSS: earthy, dreamy, americana Best-fit bridge in intake-to-content.mjs — pending Barnaby review. ─────────────────────────────────────────────────────────────────────────────── */ [data-skin="folk-warm-roots"] { --skin-slug: "folk-warm-roots"; } [data-skin="folk-indie-pastoral"] { --skin-slug: "folk-indie-pastoral"; } [data-skin="folk-americana-raw"] { --skin-slug: "folk-americana-raw"; } /* ─── Hip-Hop / R&B ──────────────────────────────────────────────────────────── THEME_MAP slugs: street-culture, neo-soul-warm, experimental-art marketing-tokens CSS: drop-brutalist, neo-soul-editorial, lofi-bedroom Best-fit bridge in intake-to-content.mjs — pending Barnaby review. ─────────────────────────────────────────────────────────────────────────────── */ [data-skin="hiphop-street-culture"] { --skin-slug: "hiphop-street-culture"; } [data-skin="hiphop-neo-soul-warm"] { --skin-slug: "hiphop-neo-soul-warm"; } [data-skin="hiphop-experimental-art"] { --skin-slug: "hiphop-experimental-art"; } /* ─── World / Latin ──────────────────────────────────────────────────────────── THEME_MAP slugs: latin-vibrant, global-fusion, traditional-rooted marketing-tokens CSS: latin-heat, diaspora-folk, k-wave-modern Best-fit bridge in intake-to-content.mjs — pending Barnaby review. ─────────────────────────────────────────────────────────────────────────────── */ [data-skin="world-latin-vibrant"] { --skin-slug: "world-latin-vibrant"; } [data-skin="world-global-fusion"] { --skin-slug: "world-global-fusion"; } [data-skin="world-traditional-rooted"] { --skin-slug: "world-traditional-rooted"; }