/* ============================================================================ Semantic roles — WHERE the tokens apply, one block per selectable role set. Layer 2 of the theme stack (tokens → roles → recipes). The admin picks the role set in the Theme tab; the server stamps on every served page (see app.server.js). Role vars answer questions like: is the primary button gold-FILLED or outlined? are card borders gold-tinted, faint white, or neutral slate? what does a selected item look like (full fill vs translucent wash)? All values are built FROM the token vars (theme.tokens.css), so any role set composes with any token set. Component stylesheets consume ONLY these role vars for such color decisions — that's the centralization. classic — current site: gradient-gold primary, gold-tinted card borders, gold-gradient selected states, gold section labels. prestige — mock 1: gold applied FLAT; gold never on card borders (faint white); selected = 10% gold wash + gold text; muted labels. slate — mock 2: flat brass fills, neutral slate hairlines, selected = full brand fill with inverse text (no washes); muted labels. ============================================================================ */ /* ---- Fallback (no data-theme-roles attribute → Classic) -------------------- */ :root { --role-btn-primary-bg: linear-gradient(135deg, #ffe088, var(--primary) 45%, var(--primary-container)); --role-btn-primary-fg: var(--on-primary); --role-btn-primary-border: transparent; --role-btn-primary-shadow: 0 4px 14px rgba(212, 175, 55, 0.28); --role-btn-primary-shadow-hover: 0 6px 20px rgba(212, 175, 55, 0.35); --role-btn-ghost-fg: var(--secondary); --role-btn-ghost-border: color-mix(in srgb, var(--secondary) 35%, transparent); --role-btn-ghost-bg: color-mix(in srgb, var(--secondary) 3%, transparent); --role-btn-danger-fg: #e0726a; --role-btn-danger-border: rgba(224, 114, 106, 0.35); --role-btn-danger-bg: rgba(224, 114, 106, 0.05); --role-btn-outline-fg: var(--primary-container); --role-btn-outline-border: var(--primary-container); --role-btn-outline-bg: transparent; --role-panel-border: var(--outline-variant); --role-card-bg: rgba(255, 255, 255, 0.035); --role-card-border: var(--border-gold); --role-selected-fg: var(--primary-container); --role-selected-bg: linear-gradient(90deg, rgba(212,175,55,0.14), rgba(212,175,55,0.02)); --role-selected-edge: inset 2px 0 0 var(--primary-container); --role-input-bg: var(--surface-container); --role-input-border: var(--outline-variant); --role-input-focus-border: var(--primary-container); --role-input-focus-ring: none; --role-label-fg: var(--primary-container); --role-focus-ring: var(--primary); --role-scrollbar-track: transparent; --role-scrollbar-thumb: var(--outline-variant); --role-scrollbar-thumb-hover: var(--primary-container); } /* ---- Classic (current site) ------------------------------------------------ */ html[data-theme-roles="classic"] { --role-btn-primary-bg: linear-gradient(135deg, #ffe088, var(--primary) 45%, var(--primary-container)); --role-btn-primary-fg: var(--on-primary); --role-btn-primary-border: transparent; --role-btn-primary-shadow: 0 4px 14px rgba(212, 175, 55, 0.28); --role-btn-primary-shadow-hover: 0 6px 20px rgba(212, 175, 55, 0.35); --role-btn-ghost-fg: var(--secondary); --role-btn-ghost-border: color-mix(in srgb, var(--secondary) 35%, transparent); --role-btn-ghost-bg: color-mix(in srgb, var(--secondary) 3%, transparent); --role-btn-danger-fg: #e0726a; --role-btn-danger-border: rgba(224, 114, 106, 0.35); --role-btn-danger-bg: rgba(224, 114, 106, 0.05); --role-btn-outline-fg: var(--primary-container); --role-btn-outline-border: var(--primary-container); --role-btn-outline-bg: transparent; --role-panel-border: var(--outline-variant); --role-card-bg: rgba(255, 255, 255, 0.035); --role-card-border: var(--border-gold); --role-selected-fg: var(--primary-container); --role-selected-bg: linear-gradient(90deg, rgba(212,175,55,0.14), rgba(212,175,55,0.02)); --role-selected-edge: inset 2px 0 0 var(--primary-container); --role-input-bg: var(--surface-container); --role-input-border: var(--outline-variant); --role-input-focus-border: var(--primary-container); --role-input-focus-ring: none; --role-label-fg: var(--primary-container); --role-focus-ring: var(--primary); --role-scrollbar-track: transparent; --role-scrollbar-thumb: var(--outline-variant); --role-scrollbar-thumb-hover: var(--primary-container); } /* ---- Prestige (mock 1): gold FLAT + restricted ------------------------------ "Gold is applied FLAT" — no gradients on fills. Gold never on card borders (faint white instead). Selected = soft 10% gold wash + gold text. */ html[data-theme-roles="prestige"] { --role-btn-primary-bg: var(--primary-container); --role-btn-primary-fg: var(--on-primary); --role-btn-primary-border: transparent; --role-btn-primary-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-container) 28%, transparent), 0 8px 26px -10px color-mix(in srgb, var(--primary-container) 35%, transparent); --role-btn-primary-shadow-hover: 0 0 0 1px color-mix(in srgb, var(--primary-container) 40%, transparent), 0 8px 26px -8px color-mix(in srgb, var(--primary-container) 45%, transparent); --role-btn-ghost-fg: var(--on-surface-variant); --role-btn-ghost-border: rgba(255, 255, 255, 0.10); --role-btn-ghost-bg: transparent; --role-btn-danger-fg: #ff5b64; --role-btn-danger-border: rgba(255, 91, 100, 0.35); --role-btn-danger-bg: rgba(255, 91, 100, 0.06); --role-btn-outline-fg: var(--primary); --role-btn-outline-border: rgba(255, 255, 255, 0.10); --role-btn-outline-bg: transparent; --role-panel-border: rgba(255, 255, 255, 0.10); --role-card-bg: color-mix(in srgb, var(--surface-card) 70%, transparent); --role-card-border: rgba(255, 255, 255, 0.14); --role-selected-fg: var(--primary); --role-selected-bg: color-mix(in srgb, var(--primary-container) 10%, transparent); --role-selected-edge: none; --role-input-bg: var(--surface-container); --role-input-border: rgba(255, 255, 255, 0.10); --role-input-focus-border: color-mix(in srgb, var(--primary-container) 45%, transparent); --role-input-focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary-container) 10%, transparent); --role-label-fg: var(--outline); --role-focus-ring: var(--primary); --role-scrollbar-track: transparent; --role-scrollbar-thumb: var(--outline-variant); --role-scrollbar-thumb-hover: var(--primary-container); } /* ---- Slate (mock 2): flat brass, neutral hairlines, full-fill selection ---- */ html[data-theme-roles="slate"] { --role-btn-primary-bg: var(--primary-container); --role-btn-primary-fg: var(--on-primary); --role-btn-primary-border: var(--primary-container); --role-btn-primary-shadow: none; --role-btn-primary-shadow-hover: none; --role-btn-ghost-fg: var(--on-surface-variant); --role-btn-ghost-border: transparent; --role-btn-ghost-bg: transparent; --role-btn-danger-fg: #f2604f; --role-btn-danger-border: #f2604f; --role-btn-danger-bg: color-mix(in srgb, #f2604f 12%, transparent); --role-btn-outline-fg: var(--on-surface); --role-btn-outline-border: var(--outline); --role-btn-outline-bg: var(--surface-container); --role-panel-border: var(--outline-variant); --role-card-bg: var(--surface-container); --role-card-border: var(--outline-variant); --role-selected-fg: var(--on-primary); --role-selected-bg: var(--primary-container); --role-selected-edge: none; --role-input-bg: var(--surface-container); --role-input-border: var(--outline-variant); --role-input-focus-border: var(--primary-container); --role-input-focus-ring: none; --role-label-fg: var(--outline); --role-focus-ring: var(--primary); --role-scrollbar-track: transparent; --role-scrollbar-thumb: var(--outline-variant); --role-scrollbar-thumb-hover: var(--outline); }