/* ============================================================================ X-Trillion design tokens — single source of truth for app theming. This file is the SHARED skin layer. Every app links it and picks a skin via the attribute (default "guinness"). A skin is more than colour: it also sets type, shape (radius) and the accent used by glows and borders. Colour-only theming reads as "same app recoloured" — skins are meant to look like different products. Skins: midnight — x-trillion dark house style (production default) guinness — Guinness corporate brand (navy / Montserrat, light) demo — Daylight Neutral white-label (non-Guinness clients) Switch at runtime: document.documentElement.dataset.skin = 'demo' Or per-URL: ?skin=demo (wired in each app's entry HTML) Adding a skin = copy a block below, change the values. Do NOT hardcode these colours back into individual apps — that per-app duplication is exactly what this file replaces. --accent-rgb / --bg-rgb exist so translucent rgba(...) values in app CSS can resolve against the active skin, e.g. rgba(var(--accent-rgb), 0.18). ========================================================================== */ /* ─── Skin: Midnight — x-trillion dark house style (production default) ──── */ [data-skin="midnight"]{ --bg: #0B1220; --bg-rgb: 11,18,32; --bg-raised: #111A2D; --bg-soft: #0E1626; --bg-deep: #070C16; --ink: #E9E5D8; --ink-soft: #C8C3B4; --ink-mute: #8A8675; --rule: #1F2A40; --rule-soft: #182238; --rule-strong: #2C3A55; --accent: #4D8FD6; --accent-rgb: 77,143,214; --accent-deep: #2E6FB8; --accent-mute: #2A4670; --accent-glow: rgba(var(--accent-rgb), 0.18); /* legacy aliases — existing var(--sapphire*) calls keep working */ --sapphire: var(--accent); --sapphire-deep: var(--accent-deep); --sapphire-mute: var(--accent-mute); --sapphire-glow: var(--accent-glow); --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-display: var(--serif); /* serif-led, editorial */ --radius: 2px; /* sharp, newsprint corners */ --radius-pill: 999px; } /* ─── Skin: Guinness — corporate brand (navy / Montserrat, light ground) ─── Palette is the canonical Guinness deck palette, lifted from presentation_mcp/audit.py (navy #21315C primary, blue #236192, accent #42A7CE, teal #6BBBAE, warm-grey #D6D2C4, red #C8102E used sparingly). Text restricted to navy / white / black per the deck brand rules. ─────── */ [data-skin="guinness"]{ --bg: #FFFFFF; --bg-rgb: 255,255,255; --bg-raised: #FFFFFF; --bg-soft: #F1F1F1; --bg-deep: #E2E6EA; --ink: #21315C; /* Guinness navy — headings + body (dk1) */ --ink-soft: #414141; /* brand Dark Grey — secondary text (dk2) */ --ink-mute: #767676; /* neutral grey */ --rule: #D6D2C4; /* warm grey — neutral fills (accent2) */ --rule-soft: #F1F1F1; /* light grey (lt2) */ --rule-strong: #9DB9D5; /* light blue (accent6) */ --accent: #3287CE; --accent-rgb: 50,135,206; /* brand hyperlink/interactive */ --accent-deep: #236192; /* corporate blue (accent5) on hover */ --accent-mute: #9DB9D5; --accent-glow: rgba(var(--accent-rgb), 0.14); --sapphire: var(--accent); --sapphire-deep: var(--accent-deep); --sapphire-mute: var(--accent-mute); --sapphire-glow: var(--accent-glow); /* Guinness is all-Montserrat — no serif. The --serif token holds the body font slot, so it maps to Montserrat here too. Brand fallback: Arial. */ --serif: 'Montserrat', 'Arial', Helvetica, sans-serif; --sans: 'Montserrat', 'Arial', Helvetica, sans-serif; --font-display: var(--sans); --radius: 4px; /* corporate, near-square */ --radius-pill: 999px; } /* ─── Skin: Demo — "Daylight Neutral" (white-label, non-Guinness clients) ── Deliberately a different product, not a recolour: light warm-paper ground, emerald accent, sans-serif display type, soft rounded corners. ─────────── */ [data-skin="demo"]{ --bg: #F6F3EC; --bg-rgb: 246,243,236; --bg-raised: #FFFFFF; --bg-soft: #EEEAE0; --bg-deep: #E4DFD2; --ink: #15202B; --ink-soft: #414B57; --ink-mute: #7A8089; --rule: #DED7C8; --rule-soft: #E8E2D6; --rule-strong: #CBC3B1; --accent: #0E7C66; --accent-rgb: 14,124,102; --accent-deep: #0A5E4D; --accent-mute: #9FC9BD; --accent-glow: rgba(var(--accent-rgb), 0.16); --sapphire: var(--accent); --sapphire-deep: var(--accent-deep); --sapphire-mute: var(--accent-mute); --sapphire-glow: var(--accent-glow); --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-display: var(--sans); /* sans-led, contemporary */ --radius: 10px; /* soft, rounded corners */ --radius-pill: 999px; } /* Fallback: if no data-skin is set, behave like Midnight (dark default). */ :root:not([data-skin]){ --bg: #0B1220; --bg-rgb: 11,18,32; --bg-raised: #111A2D; --bg-soft: #0E1626; --bg-deep: #070C16; --ink: #E9E5D8; --ink-soft: #C8C3B4; --ink-mute: #8A8675; --rule: #1F2A40; --rule-soft: #182238; --rule-strong: #2C3A55; --accent: #4D8FD6; --accent-rgb: 77,143,214; --accent-deep: #2E6FB8; --accent-mute: #2A4670; --accent-glow: rgba(var(--accent-rgb), 0.18); --sapphire: var(--accent); --sapphire-deep: var(--accent-deep); --sapphire-mute: var(--accent-mute); --sapphire-glow: var(--accent-glow); --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-display: var(--serif); --radius: 2px; --radius-pill: 999px; }