/* theme.css — romantic palette layered over tokens.css. Overrides the brand accent + warms the surfaces. The attribute (set by app/utils/brand.js) switches between the girlfriend (rose) and boyfriend (azure) palettes. These :root vars pierce the Shadow DOM, so every pg- component picks them up via var(). Loaded AFTER tokens.css. */ :root, :root[data-partner="girlfriend"] { --pg-bg: #120a11; --pg-surface: #1e1019; --pg-surface-2: #2a1623; --pg-border: #3a2030; --pg-overlay: rgba(12, 6, 10, 0.74); --pg-accent: #ff5d8f; /* rose */ --pg-accent-2: #ff86ad; --pg-accent-ink: #2a0512; --pg-romance-grad: linear-gradient(135deg, #ff5d8f 0%, #ff8f6b 100%); --pg-romance-glow: 0 10px 40px rgba(255, 93, 143, .35); } :root[data-partner="boyfriend"] { --pg-bg: #080d14; --pg-surface: #0f1620; --pg-surface-2: #16202d; --pg-border: #213040; --pg-overlay: rgba(5, 9, 14, 0.74); --pg-accent: #3d8bff; /* azure */ --pg-accent-2: #6fa8ff; --pg-accent-ink: #04121f; --pg-romance-grad: linear-gradient(135deg, #3d8bff 0%, #7c5cff 100%); --pg-romance-glow: 0 10px 40px rgba(61, 139, 255, .35); }