/* ThornBloom Studio — design tokens * Source: /shared/redesign-handoff/design_handoff_thornbloom/design_files/styles/tokens.css * Deployed to staging 2026-04-19 by website-manager as foundation for Phase 3 redesign. * Consumed via var(--tb-gold), var(--realm-metallic), etc. by every future page redesign. * Realm overrides: body.realm-dark-romance { --realm-metallic: #C4956A; } etc. * Do NOT hardcode brand color hexes in page CSS — always reference these variables. * * 2026-04-22 refresh: all 6 upcoming-realm token blocks added, Dark Romance * values aligned with website-designer spec (Oxblood=primary, Plum Noir=secondary, * Cathedral Black=bg #1A1015). Source of truth: shared/visual-style-guide.md. */ :root { /* House palette — ThornBloom Studio (midnight / ivory / brand gold) */ /* Resolved 2026-04-19: brand gold locked to #D1B28C (brand-inviolable); */ /* site bg locked to #070A14 (redesign); cream locked to #ECE4D5 (redesign). */ --tb-midnight: #070A14; --tb-midnight-deep: #0E1426; --tb-midnight-soft: #161E35; --tb-ivory: #ECE4D5; --tb-gold: #D1B28C; --tb-gold-bright: #E1C29A; --tb-taupe: #B8B3A8; --tb-steel: #5A6580; --tb-bg: #070A14; /* Active realm — defaults to house, swapped at runtime via body-class scoping */ --realm-bg: #070A14; --realm-primary: #0E1426; --realm-secondary: #161E35; --realm-metallic: #D1B28C; --realm-metallic-bright: #E1C29A; --realm-cream: #ECE4D5; --realm-muted: #5A6580; --realm-taupe: #B8B3A8; /* Per-realm metallic accent strings (derived — used by rgba borders/shadows) */ --realm-border-metallic: rgba(209, 178, 140, 0.22); --realm-border-strong: rgba(209, 178, 140, 0.42); --realm-border: var(--realm-border-metallic); /* TBG-BORDER-ALIAS: resolves per-realm; fixes gallery + existing template borders */ /* Borders — referenced to brand gold #D1B28C rgb(209, 178, 140) */ --tb-border-gold: rgba(209, 178, 140, 0.18); --tb-border-taupe: rgba(196, 188, 177, 0.14); --tb-border-strong: rgba(209, 178, 140, 0.35); /* Fonts — Cinzel removed from heading role per decision 2026-04-19. */ /* IvyPresto Display is the single heading face (IvyBodoni for Dark Romance). */ /* Cormorant Garamond for all body. No sans-serif UI face. */ --tb-font-display: 'ivypresto-display', Georgia, 'Times New Roman', serif; --tb-font-display-romance: 'ivybodoni', 'ivybodoni', 'ivypresto-display', Georgia, serif; --tb-font-heading: 'ivypresto-display', Georgia, 'Times New Roman', serif; --tb-font-body: 'Spectral', 'Cormorant Garamond', Georgia, serif; } /* ============================================================= Realm overrides — activated by adding body class. One per realm. Per-realm metallic is NON-NEGOTIABLE: never substitute brand gold. Source of truth: shared/visual-style-guide.md §Collection Palettes. ============================================================= */ /* --- 1. Enchanted Forest (LIVE) --- */ body.realm-enchanted-forest, [data-realm="enchanted-forest"] { --realm-dark: #07110C; --realm-bg: #0F1F18; --realm-primary: #142821; --realm-secondary: #1A2F25; --realm-metallic: #D1B28C; /* Brand gold — EF keeps house metallic */ --realm-metallic-bright: #E1C29A; --realm-cream: #E8E1D5; --realm-muted: #526A5E; --realm-taupe: #C4BCB1; --realm-border-metallic: rgba(209, 178, 140, 0.22); --realm-border-strong: rgba(209, 178, 140, 0.42); } /* --- 2. Dark Romance (Next, Summer 2026) --- */ /* Aligned 2026-04-22 with website-designer spec and visual-style-guide. */ /* Candlelight Amber #C4956A is the ONLY metallic; IvyBodoni display via body[data-realm="dark-romance"] font swap below. */ body.realm-dark-romance, [data-realm="dark-romance"] { --realm-bg: #1A1015; /* Cathedral Black (NOT pure black) */ --realm-primary: #5C1A1B; /* Oxblood */ --realm-secondary: #351E28; /* Plum Noir */ --realm-metallic: #C4956A; /* Candlelight Amber — NEVER brand gold */ --realm-metallic-bright: #D4A57A; --realm-cream: #E5DDD2; /* Antique Cream */ --realm-muted: #A89A95; /* Dusty Rose Gray */ --realm-taupe: #A89A95; --realm-border-metallic: rgba(196, 149, 106, 0.22); --realm-border-strong: rgba(196, 149, 106, 0.42); /* IvyBodoni display font — Dark Romance ONLY */ --tb-font-display: 'ivybodoni', 'ivybodoni', 'ivypresto-display', Georgia, 'Times New Roman', serif; --tb-font-heading: 'ivybodoni', 'ivybodoni', 'ivypresto-display', Georgia, 'Times New Roman', serif; } /* --- 3. Dark Masquerade (Coming July 2026) --- */ /* Staging uses the slug "dark-masquerade" for this page; we honor BOTH class names so future slug changes are non-breaking. */ body.realm-dark-masquerade, body.realm-dark-masquerade, [data-realm="dark-masquerade"] { --realm-bg: #0A080A; /* Stage Black */ --realm-primary: #7A1020; /* Crimson Velvet */ --realm-secondary: #4A0A12; /* Deep Wine */ --realm-metallic: #BFA034; /* Masquerade Gold — NEVER brand gold */ --realm-metallic-bright: #CFA83E; --realm-cream: #E8DFCC; /* Aged Ivory */ --realm-muted: #8A7E80; /* Velvet Gray */ --realm-taupe: #8A7E80; --realm-border-metallic: rgba(191, 160, 52, 0.22); --realm-border-strong: rgba(191, 160, 52, 0.42); } /* --- 4. Jet Noir (Coming September 2026) --- */ body.realm-jet-noir, [data-realm="jet-noir"] { --realm-bg: #141418; /* Jet Noir */ --realm-primary: #3A3A3E; /* Charcoal Graphite */ --realm-secondary: #D4C5A9; /* Champagne (used as secondary tint) */ --realm-metallic: #C9A832; /* Deco Gold — NEVER brand gold */ --realm-metallic-bright: #D9B83E; --realm-cream: #EDE8DF; /* Pearl Ivory */ --realm-muted: #8A8B90; /* Smoke Gray */ --realm-taupe: #9B9EA6; /* Noir Silver */ --realm-border-metallic: rgba(201, 168, 50, 0.22); --realm-border-strong: rgba(201, 168, 50, 0.42); } /* --- 5. Dark Academia (Coming November / December 2026) --- */ body.realm-dark-academia, [data-realm="dark-academia"] { --realm-bg: #181210; /* Library Midnight */ --realm-primary: #3B2820; /* Deep Espresso */ --realm-secondary: #7A3330; /* Oxblood Ink */ --realm-metallic: #A08540; /* Antiquarian Brass — NEVER brand gold */ --realm-metallic-bright: #B89850; --realm-cream: #E2D9CB; /* Vellum */ --realm-muted: #9A8E7E; /* Faded Ink */ --realm-taupe: #C8B99A; /* Aged Parchment */ --realm-border-metallic: rgba(160, 133, 64, 0.24); --realm-border-strong: rgba(160, 133, 64, 0.44); } /* --- 6. Rococo Palace (Coming October / November 2026) --- */ body.realm-rococo-palace, [data-realm="rococo-palace"] { --realm-bg: #120E15; /* Palatial Black */ --realm-primary: #3A1F35; /* Royal Aubergine */ --realm-secondary: #52354A; /* Gilded Violet */ --realm-metallic: #C4A24E; /* Gilded Antique — NEVER brand gold */ --realm-metallic-bright: #D4B25E; --realm-cream: #E7E0D6; /* Ivory Silk */ --realm-muted: #8A7E88; /* Faded Damask */ --realm-taupe: #D8CFC0; /* Antique Pearl */ --realm-border-metallic: rgba(196, 162, 78, 0.24); --realm-border-strong: rgba(196, 162, 78, 0.44); } /* --- 7. Ember Court (Coming January / February 2027) --- */ body.realm-ember-court, [data-realm="ember-court"] { --realm-bg: #0C0C14; /* Obsidian */ --realm-primary: #7C1009; /* Dragonfire Crimson */ --realm-secondary: #28251F; /* Scorched Earth */ --realm-metallic: #C49030; /* Sovereign Gold — NEVER brand gold */ --realm-metallic-bright: #D4A040; --realm-cream: #E5DDD2; /* Parchment Cream */ --realm-muted: #8A847E; /* Ash Gray */ --realm-taupe: #A86332; /* Molten Ember (accent 2) */ --realm-border-metallic: rgba(196, 144, 48, 0.24); --realm-border-strong: rgba(196, 144, 48, 0.44); } /* --- 8. Midnight Celestial (Coming Summer 2026) --- */ body.realm-midnight-celestial, [data-realm="midnight-celestial"] { --realm-dark: #060911; /* Deep Void — recessed section bands. NEW 2026-08-24. */ --realm-bg: #0A0E1A; /* Celestial Black */ --realm-primary: #1B2340; /* Midnight Veil */ --realm-secondary: #0E1528; /* Obsidian Navy */ --realm-metallic: #B8A060; /* Starforge Gold — NEVER brand gold */ --realm-metallic-bright: #C8B070; --realm-cream: #EDE6DA; /* Moonlit Cream */ --realm-muted: #7A849C; /* Twilight Slate */ --realm-taupe: #A8B0C4; /* Twilight Pearl — BODY COPY. Was #7A849C (4.16:1 on --realm-primary, below AA). */ --realm-accent-mauve: #C4A0A8; /* Dusty Mauve — motifs only, NEVER buttons or CTAs */ --realm-border-metallic: rgba(184, 160, 96, 0.20); --realm-border-strong: rgba(184, 160, 96, 0.40); /* Operetta 52 Light — MC signature display font */ --tb-font-display: 'operetta-52', 'ivypresto-display', Georgia, 'Times New Roman', serif; --tb-font-heading: 'operetta-52', 'ivypresto-display', Georgia, 'Times New Roman', serif; } /* --- 9. Obsidian Vow (Coming Q4 2026) --- */ /* Smoke black + gunmetal + ONE cut of deep wine. Obsidian Vow has NO metallic: * the metallic ROLE resolves to Pewter, and wine is a 1px rule or a single word, * never type on the ground. CORRECTED 2026-09-09 per website-designer SPEC §2 * (outputs/website-designer/obsidian-vow-collection-and-suites/SPEC.md): * --realm-muted was #4A0F1B -> 1.30:1 on #0A0A0B; every paragraph invisible * --realm-metallic was #4D5057 -> 2.45:1, and identical to --realm-primary * --realm-primary was the gunmetal ACCENT, not an alternating section surface * --realm-dark / --tb-font-display / --tb-font-heading were missing * Measured on the #0A0A0B ground: cream 15.11:1, metallic 12.07:1, * muted 6.34:1, taupe 4.06:1 (large/tracked labels only, never a paragraph). */ body.realm-obsidian-vow, [data-realm="obsidian-vow"] { --realm-dark: #060607; /* Ash Void — recessed bands */ --realm-bg: #0A0A0B; /* Smoke Black */ --realm-primary: #141518; /* Ash Ground — alternating section surface */ --realm-secondary: #0e0f12; /* Ash Deep */ --realm-metallic: #C9CACD; /* Pewter — OV has no metallic; NEVER brand gold */ --realm-metallic-bright: #dfe1e5; --realm-cream: #dfe1e5; /* Headline ink */ --realm-muted: #8f9298; /* Body copy */ --realm-taupe: #6f7178; /* Eyebrows + fine print ONLY — never a paragraph */ --realm-border-metallic: rgba(201, 202, 205, 0.18); --realm-border-strong: rgba(201, 202, 205, 0.34); --tb-font-display: 'Italiana', Georgia, 'Times New Roman', serif; --tb-font-heading: 'Italiana', Georgia, 'Times New Roman', serif; --tb-font-body: 'Jost', -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif; } /* --- Obsidian Vow self-hosted faces (Italiana + Jost, SIL OFL) --- * Declared here, not in a component file, because tokens.css is the ONE file * thornbloom_inline_tokens_fonts() prints inline at wp_head priority 4 — without * that, FlyingPress RUCSS defers the faces and --tb-font-display/-body above fall * back to Georgia / system sans at first paint for logged-out visitors * (reference_first_paint_token_inline). URLs are ROOT-RELATIVE on purpose: an * inline