/* ========================================================================= tokens.css — 21 token sets for MusiciansWebsites.com persona re-skinner 7 genres × 3 modifiers. Switched via [data-genre][data-modifier] on . Each set defines 12 vars. Defaults live in :root (Jazz / ECM Editorial). ========================================================================= */ /* ---------- DEFAULT (Jazz / ECM Editorial — Helena fits) ---------- */ :root { --bg: #F2EDE4; --ink: #0A0A0A; --accent: #5A5A5A; --accent-2: #B8893A; --rule: rgba(10,10,10,0.14); --display-font: "Fraunces", "GT Sectra", Georgia, serif; --body-font: "Inter", "Söhne", -apple-system, system-ui, sans-serif; --display-weight: 500; --letter-spacing: -0.02em; --hero-treatment: none; --hero-image-style: grayscale(1) contrast(1.05); --mood-radius: 0px; /* derived */ --ink-soft: color-mix(in oklab, var(--ink) 65%, var(--bg) 35%); --bg-elev: color-mix(in oklab, var(--bg) 92%, var(--ink) 8%); } /* =========================================================================== 1. CLASSICAL =========================================================================== */ [data-genre="classical"][data-modifier="concert-hall"] { --bg: #F4F1EA; --ink: #0E0E0E; --accent: #8B0000; --accent-2: #B8945F; --rule: rgba(14,14,14,0.15); --display-font: "Fraunces", "Tiempos Headline", Georgia, serif; --body-font: "Inter", "Söhne", system-ui, sans-serif; --display-weight: 400; --letter-spacing: -0.015em; --hero-treatment: none; --hero-image-style: grayscale(1) contrast(1.08) brightness(0.95); --mood-radius: 0px; } [data-genre="classical"][data-modifier="nordic-chamber"] { --bg: #E8E6E1; --ink: #1A1F26; --accent: #5C7A89; --accent-2: #A9A39A; --rule: rgba(26,31,38,0.12); --display-font: "Cormorant Garamond", "GT Sectra", Georgia, serif; --body-font: "Inter", system-ui, sans-serif; --display-weight: 300; --letter-spacing: -0.01em; --hero-treatment: none; --hero-image-style: grayscale(0.7) contrast(0.95) brightness(1.02); --mood-radius: 0px; } [data-genre="classical"][data-modifier="conservatory-contemporary"] { --bg: #FFFFFF; --ink: #111111; --accent: #C8102E; --accent-2: #444444; --rule: rgba(17,17,17,0.18); --display-font: "Playfair Display", "Canela Display", Georgia, serif; --body-font: "Inter", "Neue Haas Grotesk", system-ui, sans-serif; --display-weight: 600; --letter-spacing: -0.025em; --hero-treatment: none; --hero-image-style: contrast(1.04) saturate(1.05); --mood-radius: 2px; } /* =========================================================================== 2. JAZZ =========================================================================== */ [data-genre="jazz"][data-modifier="ecm-editorial"] { --bg: #F2EDE4; --ink: #0A0A0A; --accent: #5A5A5A; --accent-2: #B8893A; --rule: rgba(10,10,10,0.14); --display-font: "Fraunces", "Söhne Breit", Georgia, serif; --body-font: "Inter", "Söhne", system-ui, sans-serif; --display-weight: 500; --letter-spacing: -0.02em; --hero-treatment: none; --hero-image-style: grayscale(1) contrast(1.05); --mood-radius: 0px; } [data-genre="jazz"][data-modifier="blue-note-modern"] { --bg: #EEEAE2; --ink: #0A0A0A; --accent: #0F2A4A; --accent-2: #C8A45C; --rule: rgba(10,10,10,0.18); --display-font: "Fraunces", "Canela", "GT Sectra Display", serif; --body-font: "Inter", "GT America", system-ui, sans-serif; --display-weight: 700; --letter-spacing: -0.03em; --hero-treatment: linear-gradient(135deg, rgba(15,42,74,0.12), rgba(200,164,92,0.08)); --hero-image-style: contrast(1.1) sepia(0.15) saturate(1.1); --mood-radius: 0px; } [data-genre="jazz"][data-modifier="studio-notebook"] { --bg: #EFE6D2; --ink: #1A1A1A; --accent: #7A2E2E; --accent-2: #3C5A3C; --rule: rgba(26,26,26,0.15); --display-font: "Cormorant Garamond", "Fraunces", Georgia, serif; --body-font: "Inter", system-ui, sans-serif; --display-weight: 500; --letter-spacing: -0.01em; --hero-treatment: none; --hero-image-style: sepia(0.25) contrast(1.04) brightness(1.02); --mood-radius: 1px; } /* =========================================================================== 3. ROCK / METAL =========================================================================== */ [data-genre="rock"][data-modifier="heavy-modern"] { --bg: #08080A; --ink: #EDE7DA; --accent: #B0151F; --accent-2: #C9A04A; --rule: rgba(237,231,218,0.14); --display-font: "Big Shoulders Display", "Bebas Neue", "Druk Wide", "Anton", Impact, sans-serif; --body-font: "Inter", system-ui, sans-serif; --display-weight: 700; --letter-spacing: -0.01em; --hero-treatment: radial-gradient(ellipse at top, rgba(176,21,31,0.18), transparent 60%); --hero-image-style: grayscale(0.9) contrast(1.2) brightness(0.9); --mood-radius: 0px; } [data-genre="rock"][data-modifier="punk-hardcore-loud"] { --bg: #F2EFE9; --ink: #111111; --accent: #FF3B1F; --accent-2: #1A1A1A; --rule: rgba(17,17,17,0.25); --display-font: "Anton", "Bebas Neue", "Druk Condensed", Impact, sans-serif; --body-font: "JetBrains Mono", "GT America Mono", ui-monospace, monospace; --display-weight: 400; --letter-spacing: 0em; --hero-treatment: none; --hero-image-style: contrast(1.3) saturate(1.1); --mood-radius: 0px; } [data-genre="rock"][data-modifier="indie-rock-editorial"] { --bg: #F5F1EA; --ink: #1A1A1A; --accent: #2E4A3A; --accent-2: #3A4DBE; --rule: rgba(26,26,26,0.16); --display-font: "Barlow Condensed", "Founders Grotesk Condensed", sans-serif; --body-font: "Space Grotesk", "Inter", "Söhne", system-ui, sans-serif; --display-weight: 600; --letter-spacing: -0.015em; --hero-treatment: none; --hero-image-style: grayscale(0.4) contrast(1.05); --mood-radius: 1px; } /* =========================================================================== 4. POP / ELECTRONIC =========================================================================== */ [data-genre="pop"][data-modifier="hyperpop-brat"] { --bg: #8ACE00; --ink: #000000; --accent: #000000; --accent-2: #FF2E88; --rule: rgba(0,0,0,0.25); --display-font: "Arial Black", "Helvetica Neue", Arial, sans-serif; --body-font: "Arial", "Helvetica Neue", sans-serif; --display-weight: 900; --letter-spacing: -0.04em; --hero-treatment: none; --hero-image-style: contrast(1.15) saturate(1.2); --mood-radius: 0px; } [data-genre="pop"][data-modifier="editorial-indie-pop"] { --bg: #F4F1EC; --ink: #1A1612; --accent: #5B3A29; --accent-2: #D94F2C; --rule: rgba(26,22,18,0.14); --display-font: "Playfair Display", "PP Editorial New", Georgia, serif; --body-font: "Inter", "ABC Diatype", system-ui, sans-serif; --display-weight: 500; --letter-spacing: -0.02em; --hero-treatment: none; --hero-image-style: contrast(1.02) saturate(0.95) brightness(1.02); --mood-radius: 2px; } [data-genre="pop"][data-modifier="club-producer-minimal"] { --bg: #0E0E0E; --ink: #F2F2F2; --accent: #1F1FFF; --accent-2: #FFFFFF; --rule: rgba(242,242,242,0.16); --display-font: "JetBrains Mono", "Söhne Mono", "ABC Diatype Mono", ui-monospace, monospace; --body-font: "JetBrains Mono", "Söhne Mono", ui-monospace, monospace; --display-weight: 500; --letter-spacing: -0.005em; --hero-treatment: none; --hero-image-style: grayscale(0.6) contrast(1.1); --mood-radius: 0px; } /* =========================================================================== 5. FOLK / SINGER-SONGWRITER =========================================================================== */ [data-genre="folk"][data-modifier="earthy"] { --bg: #F4EFE6; --ink: #1B1A17; --accent: #A85C3C; --accent-2: #5C6B4A; --rule: rgba(27,26,23,0.14); --display-font: "Fraunces", "GT Sectra Display", Georgia, serif; --body-font: "Inter", system-ui, sans-serif; --display-weight: 400; --letter-spacing: -0.015em; --hero-treatment: none; --hero-image-style: sepia(0.18) contrast(1.02) brightness(1.03); --mood-radius: 0px; } [data-genre="folk"][data-modifier="dreamy"] { --bg: #0E0F12; --ink: #E8E2D6; --accent: #B36A75; --accent-2: #7B8FA1; --rule: rgba(232,226,214,0.14); --display-font: "Cormorant Garamond", "Canela Deck", Georgia, serif; --body-font: "Inter", "Söhne", system-ui, sans-serif; --display-weight: 400; --letter-spacing: -0.02em; --hero-treatment: radial-gradient(ellipse at center, rgba(179,106,117,0.10), transparent 70%); --hero-image-style: brightness(0.85) contrast(1.1) saturate(0.9); --mood-radius: 0px; } [data-genre="folk"][data-modifier="americana"] { --bg: #EDE3D2; --ink: #171311; --accent: #B8551E; --accent-2: #3E5C3A; --rule: rgba(23,19,17,0.16); --display-font: "IM Fell English", "Playfair Display", "Caslon Pro", Georgia, serif; --body-font: "Barlow", "Founders Grotesk", system-ui, sans-serif; --display-weight: 400; --letter-spacing: -0.01em; --hero-treatment: none; --hero-image-style: sepia(0.3) contrast(1.08) saturate(1.1); --mood-radius: 0px; } /* =========================================================================== 6. HIP-HOP / R&B =========================================================================== */ [data-genre="hiphop"][data-modifier="drop-brutalist"] { --bg: #FFFFFF; --ink: #000000; --accent: #ED1C24; --accent-2: #000000; --rule: rgba(0,0,0,0.18); --display-font: "Inter", "Helvetica Now", "Helvetica Neue", Arial, sans-serif; --body-font: "Inter", "Helvetica Neue", Arial, sans-serif; --display-weight: 800; --letter-spacing: -0.025em; --hero-treatment: none; --hero-image-style: contrast(1.1) saturate(1.05); --mood-radius: 0px; } [data-genre="hiphop"][data-modifier="neo-soul-editorial"] { --bg: #F1E9D8; --ink: #3A2A1F; --accent: #B4533A; --accent-2: #D4A437; --rule: rgba(58,42,31,0.16); --display-font: "Fraunces", "PP Editorial New", "GT Sectra", Georgia, serif; --body-font: "Inter", "Söhne", system-ui, sans-serif; --display-weight: 500; --letter-spacing: -0.015em; --hero-treatment: linear-gradient(180deg, rgba(180,83,58,0.05), transparent); --hero-image-style: sepia(0.22) contrast(1.05) saturate(1.1) brightness(1.02); --mood-radius: 1px; } [data-genre="hiphop"][data-modifier="lofi-bedroom"] { --bg: #0F1A2E; --ink: #E8B86D; --accent: #C9A0A0; --accent-2: #9CC9A0; --rule: rgba(232,184,109,0.18); --display-font: "VT323", "IBM Plex Mono", ui-monospace, monospace; --body-font: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace; --display-weight: 400; --letter-spacing: 0em; --hero-treatment: linear-gradient(180deg, rgba(15,26,46,0.0), rgba(15,26,46,0.7)), repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 3px); --hero-image-style: brightness(0.85) saturate(0.85) contrast(1.05); --mood-radius: 2px; } /* =========================================================================== 7. WORLD / LATIN =========================================================================== */ [data-genre="world"][data-modifier="latin-heat"] { --bg: #0B0B0B; --ink: #F2FF1F; --accent: #FF2E63; --accent-2: #00D9FF; --rule: rgba(242,255,31,0.16); --display-font: "Anton", "Druk Wide", Impact, sans-serif; --body-font: "Inter", "General Sans", system-ui, sans-serif; --display-weight: 400; --letter-spacing: -0.03em; --hero-treatment: radial-gradient(circle at 20% 30%, rgba(255,46,99,0.20), transparent 50%), radial-gradient(circle at 80% 70%, rgba(0,217,255,0.15), transparent 50%); --hero-image-style: contrast(1.2) saturate(1.3) brightness(0.95); --mood-radius: 0px; } [data-genre="world"][data-modifier="diaspora-folk"] { --bg: #F1E9D6; --ink: #1A1410; --accent: #C25A3C; --accent-2: #C9A24A; --rule: rgba(26,20,16,0.15); --display-font: "Fraunces", "GT Sectra", "Migra", Georgia, serif; --body-font: "Inter", system-ui, sans-serif; --display-weight: 500; --letter-spacing: -0.02em; --hero-treatment: none; --hero-image-style: sepia(0.2) contrast(1.05) saturate(1.05); --mood-radius: 0px; } [data-genre="world"][data-modifier="k-wave-modern"] { --bg: #FAFAFA; --ink: #111111; --accent: #7B5BFF; --accent-2: #FFD6E0; --rule: rgba(17,17,17,0.10); --display-font: "Inter", "Pretendard", "Noto Sans KR", system-ui, sans-serif; --body-font: "Inter", "Pretendard", "Noto Sans KR", system-ui, sans-serif; --display-weight: 800; --letter-spacing: -0.035em; --hero-treatment: linear-gradient(135deg, rgba(123,91,255,0.08), rgba(255,214,224,0.10)); --hero-image-style: contrast(1.05) saturate(1.1) brightness(1.05); --mood-radius: 12px; }