/** * Sci-Fi world theme — cyan/steel palette overriding tokens.css defaults. * Activated by setting data-world="scifi" on . */ html[data-world="scifi"] { /* Background — deep blue-black, cold industrial */ --c-bg: #060c18; --c-bg-alt: #0b1524; --c-bg-warm: #102030; --c-surface: #152538; --c-surface-light: #1f3049; --c-border: #20344b; --c-border-glow: rgba(79, 208, 224, 0.25); --c-text: #dfe8f2; --c-text-dim: #7892a8; --c-text-bright: #ffffff; /* Accent — electric cyan */ --c-accent: #4fd0e0; --c-accent-dim: rgba(79, 208, 224, 0.15); --c-accent-glow: rgba(79, 208, 224, 0.45); /* Credits tinted cyan-gold */ --c-gold: #f0c850; --c-gold-dim: rgba(240, 200, 80, 0.15); --c-gold-glow: rgba(240, 200, 80, 0.4); --c-heal: #3ad0a4; --c-heal-dim: rgba(58, 208, 164, 0.15); --c-danger: #ff5b6b; --c-danger-dim: rgba(255, 91, 107, 0.15); --c-danger-glow: rgba(255, 91, 107, 0.4); --c-mana: #60a0ff; --c-mana-dim: rgba(96, 160, 255, 0.15); /* Hull plating instead of dungeon stone */ --c-wall: #1b2838; --c-wall-light: #253548; --c-wall-dark: #0f1a28; --c-wall-edge: #2d4058; --c-floor: #0a1220; --c-floor-alt: #0d1628; --c-floor-edge: rgba(120, 200, 240, 0.035); /* Wall texture — riveted hull panels */ --wall-texture: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' fill='%23152538'/%3E%3Crect x='2' y='2' width='36' height='17' fill='%231b2c42' stroke='%232d4058' stroke-width='0.5'/%3E%3Crect x='2' y='21' width='36' height='17' fill='%23172838' stroke='%232d4058' stroke-width='0.5'/%3E%3Ccircle cx='6' cy='6' r='0.8' fill='%233d556f'/%3E%3Ccircle cx='34' cy='6' r='0.8' fill='%233d556f'/%3E%3Ccircle cx='6' cy='15' r='0.8' fill='%233d556f'/%3E%3Ccircle cx='34' cy='15' r='0.8' fill='%233d556f'/%3E%3Ccircle cx='6' cy='25' r='0.8' fill='%233d556f'/%3E%3Ccircle cx='34' cy='25' r='0.8' fill='%233d556f'/%3E%3Ccircle cx='6' cy='34' r='0.8' fill='%233d556f'/%3E%3Ccircle cx='34' cy='34' r='0.8' fill='%233d556f'/%3E%3C/svg%3E"); /* Floor — metal deck plating */ --floor-texture: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' fill='%230a1220'/%3E%3Crect x='1' y='1' width='18' height='18' rx='1' fill='%230c1626' stroke='%231b2a3e' stroke-width='0.5'/%3E%3Crect x='21' y='1' width='18' height='18' rx='1' fill='%230d1828' stroke='%231b2a3e' stroke-width='0.5'/%3E%3Crect x='1' y='21' width='18' height='18' rx='1' fill='%230d1828' stroke='%231b2a3e' stroke-width='0.5'/%3E%3Crect x='21' y='21' width='18' height='18' rx='1' fill='%230c1626' stroke='%231b2a3e' stroke-width='0.5'/%3E%3Crect x='9' y='9' width='2' height='2' fill='%23153047'/%3E%3Crect x='29' y='29' width='2' height='2' fill='%23153047'/%3E%3C/svg%3E"); /* Background — cyan reactor glow */ --bg-abyss: radial-gradient(ellipse at 30% 40%, rgba(34, 180, 210, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(90, 130, 200, 0.09) 0%, transparent 45%), radial-gradient(ellipse at 50% 90%, rgba(79, 208, 224, 0.06) 0%, transparent 40%), radial-gradient(ellipse at 10% 80%, rgba(50, 100, 160, 0.05) 0%, transparent 35%), radial-gradient(ellipse at 90% 20%, rgba(120, 180, 220, 0.05) 0%, transparent 35%); --fog-color: rgba(4, 10, 20, 0.94); }