/* ========================================================================= THEME — PRINCE (slug: prince) Implements docs/features/themes/Theme-Prince-v1.md §3 (semantic token map) verbatim, plus the documented extras (§5 backdrop, §6 elevation, §7 inverse, §8 motion). A dark-leaning glam theme: near-black violet planes, a functional brightened-violet accent, and an antique-gold metallic second accent. File contract (Themes-Architecture-v1.md §"theme file contract"): - whole file wrapped in @media screen (print keeps the Light look); - every selector prefixed body[data-theme="prince"]; - re-points ONLY the themeable-API tokens + documented extras; - theme-local primitives (--p-*) declared in the same block, single-hop; - NEVER redefines forbidden prefixes: --game-*, --admin-*, --text-*, --logo-*, --space-*, --max-width* (--color-accent-text IS allowed). Contrast (WCAG 2.x relative-luminance, script-recomputed — see spec §3). Every pair clears its floor with margin >= 0.2; NO spec value adjusted. surface-page-text #E8E2F0 on #141019 ...... 14.82:1 (floor 4.5, +10.32) surface-page-muted #A79FB8 on #141019 ...... 7.42:1 (floor 4.5, +2.92) surface-raised-text #F0EAF6 on #1E1726 ...... 14.77:1 (floor 4.5, +10.27) surface-raised-muted #ADA4BE on #1E1726 ...... 7.32:1 (floor 4.5, +2.82) surface-deep-text #E8E2F0 on #0E0A13 ...... 15.46:1 (floor 4.5, +10.96) surface-deep-muted #9C93AD on #0E0A13 ...... 6.71:1 (floor 4.5, +2.21) inverse-text #1A1220 on #F3ECDA ...... 15.48:1 (floor 4.5, +10.98) inverse-muted #4A3F2E on #F3ECDA ...... 8.73:1 (floor 4.5, +4.23) inverse-border #8A7A55 on #F3ECDA ...... 3.57:1 (floor 3.0, +0.57) accent-surface-text #1A1220 on #C9A227 ...... 7.54:1 (floor 4.5, +3.04) accent-surf-muted #3A2E0A on #C9A227 ...... 5.51:1 (floor 4.5, +1.01) surface-border #75628F on #141019 ...... 3.49:1 (floor 3.0, +0.49) color-accent(violet) #A78BFA on #141019/#1E1726 6.90 / 6.40:1 (n-txt 3.0) color-accent-light #C4B0FC on #141019 ...... 9.81:1 (floor 4.5, +5.31) color-accent-alt gold#D4AF37 on #141019 ...... 8.93:1 (floor 4.5, +4.43) #D4AF37 on #1E1726 ...... 8.28:1 (non-text 3.0) focus-ring #C4B0FC on #141019 ...... 9.81:1 (floor 3.0, +6.81) link-hover #C4B0FC on #141019 ...... 9.81:1 (floor 4.5, +5.31) selection #D4AF37 / #141019 ........ 8.93:1 (floor 4.5, +4.43) --color-accent-text (added AFTER this spec was drafted): accent-as-TEXT foreground role. The spec (§3) already split a text-safe accent (violet #A78BFA — "meets 4.5:1 text on page & raised") from the display-only gold, so accent-text = the text-safe variant #A78BFA: #A78BFA on #141019 (page) = 6.90:1 (margin +2.40) #A78BFA on #1E1726 (raised) = 6.40:1 (margin +1.90) #A78BFA on #0E0A13 (deep) = 7.20:1 (margin +2.70) #A78BFA on accent-dim/page = 5.64:1 (tint 0.14-alpha violet over near-black ~= #292138) All >= 4.5:1 with margin >= 0.2. (Gold stays a surface/large-element accent per §1 Don't; accent-TEXT is the violet, not gold. On the LIGHT inverse tile #F3ECDA, accent-text isn't used — that tile carries ink text via --surface-inverse-text.) ========================================================================= */ @media screen { /* ---- Self-hosted display face (spec §4) ---- Playfair Display — high-contrast Didone for headings; body stays Inter (already shipped, not re-declared). latin subset, self-hosted woff2. License: SIL Open Font License 1.1. Source: https://fonts.google.com/specimen/Playfair+Display https://github.com/google/fonts/tree/main/ofl/playfairdisplay */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/themes/playfair-display-400.woff2") format("woff2"); } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/themes/playfair-display-700.woff2") format("woff2"); } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/themes/playfair-display-900.woff2") format("woff2"); } body[data-theme="prince"] { /* ---- Theme-local primitives (spec §2) — single-hop aliases only ---- */ --p-violet-950: #0E0A13; /* deepest recessed plane (surface-deep) */ --p-violet-900: #141019; /* page canvas (surface-page) */ --p-violet-850: #1E1726; /* raised tile (elevation tint L1) */ --p-violet-authentic: #4B384C; /* announced signature purple — atmosphere ONLY, never a contrast partner (spec §1 Don't) */ --p-violet-border: #75628F; /* surface-family divider */ --p-violet-500: #A78BFA; /* functional accent (violet) */ --p-violet-300: #C4B0FC; /* accent-light: focus / link-hover / hover */ --p-violet-tint: rgba(167, 139, 250, 0.14); /* tinted accent backgrounds */ --p-gold-500: #D4AF37; /* antique gold — second accent, selection bg */ --p-gold-surface: #C9A227; /* gold surface fill for --surface-accent */ --p-cream-gold: #F3ECDA; /* light inverse (contrast) tile surface */ --p-cream-gold-border:#8A7A55; /* border on the light inverse tile */ --p-off-white: #E8E2F0; /* primary text on page / deep */ --p-off-white-raised: #F0EAF6; /* primary text on raised tiles */ --p-muted-page: #A79FB8; /* muted text on page */ --p-muted-raised: #ADA4BE; /* muted text on raised */ --p-muted-deep: #9C93AD; /* muted text on deep */ --p-ink: #1A1220; /* near-black ink for text on light/gold */ --p-ink-muted: #4A3F2E; /* muted ink on the light inverse tile */ /* ---- Surface / text / muted pairs (spec §3) ---- */ --surface-page: var(--p-violet-900); --surface-page-text: var(--p-off-white); --surface-page-text-muted: var(--p-muted-page); --surface-raised: var(--p-violet-850); --surface-raised-text: var(--p-off-white-raised); --surface-raised-text-muted: var(--p-muted-raised); --surface-deep: var(--p-violet-950); --surface-deep-text: var(--p-off-white); --surface-deep-text-muted: var(--p-muted-deep); /* Higher elevation tint (L2 hover) — one more rung up the ladder (spec §6). */ --surface-raised-2: var(--p-violet-850); /* Inverse = the "emphasized tile": on this dark violet site it FLIPS to a warm gold-cream card so it stays the single lightest plane (spec §7). */ --surface-inverse: var(--p-cream-gold); --surface-inverse-text: var(--p-ink); --surface-inverse-text-muted: var(--p-ink-muted); --surface-inverse-border: var(--p-cream-gold-border); /* Accent surface (gold CTA) — near-black ink text for legibility (spec §3). */ --surface-accent: var(--p-gold-surface); --surface-accent-text: var(--p-ink); --surface-accent-text-muted: #3A2E0A; /* tempered darker → 5.51:1 (spec §3) */ /* Surface-family divider — clears 3:1 vs page (spec §3). */ --surface-border: var(--p-violet-border); /* ---- Accent trio (semantic brand-accent role) ---- */ --color-accent: var(--p-violet-500); --color-accent-light: var(--p-violet-300); --color-accent-dim: var(--p-violet-tint); /* Accent-as-TEXT role (post-dates the spec — see header; text-safe violet). */ --color-accent-text: var(--p-violet-500); /* ---- Extended themeable API ---- */ --color-accent-alt: var(--p-gold-500); --focus-ring: var(--p-violet-300); --link-hover: var(--p-violet-300); --selection-bg: var(--p-gold-500); --selection-text: var(--p-violet-900); /* ---- Display type personality (spec §4) — Didone serif for headings. Body (Inter) is unchanged; only the display face is swapped. ---- */ --font-display: 'Playfair Display', 'Fraunces', Georgia, serif; --display-weight: 700; --display-tracking: normal; --display-transform: none; /* ---- Page backdrop (spec §5) — whisper paisley/teardrop damask over a soft violet radial glow. The motif fill (#1A1422) sits within ~0.004 L of the page plane, so it reads as sheen not pattern and cannot degrade text contrast (text always lives on scrimmed --surface-* planes). The glow uses the authentic-purple primitive purely as atmosphere. ---- */ --surface-page-backdrop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath fill='none' stroke='%231A1422' stroke-width='1.4' d='M60 18c22 0 34 16 34 34 0 20-16 30-30 30-16 0-24-12-24-24 0-14 10-22 20-22 9 0 15 7 15 15 0 8-6 12-11 12-5 0-8-4-8-8'/%3E%3Cpath fill='none' stroke='%231A1422' stroke-width='1.4' d='M0 78c22 0 34 16 34 34 0 4-1 7-2 8M120 78c-22 0-34 16-34 34 0 4 1 7 2 8'/%3E%3C/svg%3E"), radial-gradient(120% 90% at 50% -10%, rgba(75, 56, 76, 0.55) 0%, rgba(20, 16, 25, 0) 60%); /* ---- Elevation = lighter tint + faded shadow (spec §6). On a dark plane depth is carried by the surface stepping lighter (deep < page < raised); shadows are retained but faded toward transparent, a faint anchor only. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.50); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55); --shadow-lg: 0 10px 34px rgba(0, 0, 0, 0.60); /* Radii, borders, and motion easing/durations inherit Light unchanged (spec §3/§6): Prince is a color/elevation/type re-point. Borders below re-point to the violet/gold family via the surface tokens already set. */ --border-thin: 1px solid var(--surface-border); --border-mid: 2px solid var(--p-violet-border); --border-accent: 2px solid var(--color-accent-alt); } /* ::selection extension point (file contract §2). Prefixed + inside @media screen. Uses the re-pointed pair so it stays a single hop off the tokens. */ body[data-theme="prince"] ::selection { background: var(--selection-bg); color: var(--selection-text); } /* Body background layers (spec §5): whisper paisley tile fixed over the fixed violet glow. Static — unaffected by reduced-motion. */ body[data-theme="prince"] { background-image: var(--surface-page-backdrop); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; } /* ---- Motion accent (spec §8) — layout-chrome only. Static equivalent: the site title is solid gold OUTSIDE the reduced-motion query, so the glam-gold identity survives with no animation. ---- */ body[data-theme="prince"] .site-title { color: var(--color-accent-alt); } @media (prefers-reduced-motion: no-preference) { /* slow metallic sheen sweeping across the site title / hero display text */ @keyframes prince-gold-sheen { 0% { background-position: -150% 0; } 100% { background-position: 250% 0; } } body[data-theme="prince"] .site-title { background: linear-gradient(100deg, var(--color-accent-alt) 0%, #F6E27A 45%, var(--color-accent-alt) 60%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: prince-gold-sheen 9s var(--ease-out) infinite; } } }