/* ════════════════════════════════════════════════════════════ theme.css — ZYNTHR design tokens + 16 switchable themes Themes are applied via Groups: love · special · casual · friendship ════════════════════════════════════════════════════════════ */ :root{ /* base theme: Midnight Crush (love) */ --bg:#08070F; --bg-2:#0E0D1A; --surface:#13121F; --surface-2:#1A1828; --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.08); --stroke:rgba(255,255,255,.09); --stroke-2:rgba(255,255,255,.16); --primary:#FF2E8B; --primary-2:#FF5CA8; --secondary:#8B5CFF; --accent:#2EE6FF; --gold:#FFC54D; --danger:#FF4D5E; --success:#3DDC97; --text:#F4F2FF; --muted:#9C98B8; --faint:#5E5A78; --grad-brand:linear-gradient(120deg,#FF2E8B 0%,#B14DFF 55%,#2EE6FF 110%); --grad-cta:linear-gradient(120deg,#FF2E8B,#8B5CFF); --grad-gold:linear-gradient(120deg,#FFC54D,#FF8A3D); --glow-primary:0 0 24px rgba(255,46,139,.45); --glow-soft:0 8px 40px rgba(139,92,255,.22); --font-display:'Unbounded',sans-serif; --font-body:'Space Grotesk',sans-serif; --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --nav-h:68px; --header-h:60px; --ease:cubic-bezier(.32,.72,.24,1); } /* ── LOVE ─────────────────────────────────────────────── */ [data-theme="cherry-noir"]{ --bg:#0D0608;--bg-2:#160A0E;--surface:#1C0D13;--surface-2:#261218; --primary:#FF3355;--primary-2:#FF6680;--secondary:#C9184A;--accent:#FFB3C6; --grad-brand:linear-gradient(120deg,#FF3355,#C9184A 60%,#FF8FA3); --grad-cta:linear-gradient(120deg,#FF3355,#C9184A); --glow-primary:0 0 24px rgba(255,51,85,.45); } [data-theme="rose-quartz"]{ --bg:#100B12;--bg-2:#181019;--surface:#1F1521;--surface-2:#291B2B; --primary:#F7A8C4;--primary-2:#FCC8DB;--secondary:#C77DBB;--accent:#FFE3EE; --text:#FFF4F9;--muted:#C2A8B8; --grad-brand:linear-gradient(120deg,#F7A8C4,#C77DBB 60%,#9F6BD8); --grad-cta:linear-gradient(120deg,#E886AE,#B06AC9); --glow-primary:0 0 24px rgba(247,168,196,.40); } [data-theme="heartbeat"]{ --bg:#0A0410;--bg-2:#130820;--surface:#1A0C2B;--surface-2:#241238; --primary:#FF2E5F;--primary-2:#FF5C84;--secondary:#FF7B2E;--accent:#FFD166; --grad-brand:linear-gradient(120deg,#FF2E5F,#FF7B2E); --grad-cta:linear-gradient(120deg,#FF2E5F,#FF7B2E); --glow-primary:0 0 24px rgba(255,46,95,.5); } /* ── SPECIAL PERSON ───────────────────────────────────── */ [data-theme="golden-hour"]{ --bg:#0E0903;--bg-2:#180F06;--surface:#1F150A;--surface-2:#2A1D0E; --primary:#FFC54D;--primary-2:#FFD98A;--secondary:#FF8A3D;--accent:#FFE9B8; --text:#FFF8EA;--muted:#C2AE8A; --grad-brand:linear-gradient(120deg,#FFC54D,#FF8A3D 70%,#FF5E62); --grad-cta:linear-gradient(120deg,#FFB23D,#FF7A3D); --glow-primary:0 0 24px rgba(255,197,77,.4); } [data-theme="star-crossed"]{ --bg:#050816;--bg-2:#0A0F24;--surface:#101732;--surface-2:#172040; --primary:#7AA2FF;--primary-2:#A3BEFF;--secondary:#C8B6FF;--accent:#FFE066; --grad-brand:linear-gradient(120deg,#7AA2FF,#C8B6FF 60%,#FFE066); --grad-cta:linear-gradient(120deg,#5C85F2,#9D7DF2); --glow-primary:0 0 24px rgba(122,162,255,.45); } [data-theme="lavender-haze"]{ --bg:#0C0A14;--bg-2:#151123;--surface:#1C172E;--surface-2:#261F3D; --primary:#B69CFF;--primary-2:#CDBBFF;--secondary:#8B5CFF;--accent:#F2B8FF; --grad-brand:linear-gradient(120deg,#B69CFF,#F2B8FF); --grad-cta:linear-gradient(120deg,#9D7DFF,#D08BFF); --glow-primary:0 0 24px rgba(182,156,255,.45); } [data-theme="eclipse"]{ --bg:#060606;--bg-2:#0D0D0F;--surface:#141417;--surface-2:#1C1C21; --primary:#E8E6F2;--primary-2:#FFFFFF;--secondary:#8A86A8;--accent:#FF2E8B; --grad-brand:linear-gradient(120deg,#FFFFFF,#9A93C4); --grad-cta:linear-gradient(120deg,#E8E6F2,#B9B4D6); --glow-primary:0 0 24px rgba(232,230,242,.25); } /* ── CASUAL ───────────────────────────────────────────── */ [data-theme="cyber-lime"]{ --bg:#070A06;--bg-2:#0D130A;--surface:#121A0E;--surface-2:#1A2414; --primary:#B6FF2E;--primary-2:#D2FF7A;--secondary:#2EFFB6;--accent:#EAFF8A; --text:#F4FFEA;--muted:#9CB890; --grad-brand:linear-gradient(120deg,#B6FF2E,#2EFFB6); --grad-cta:linear-gradient(120deg,#9BE62E,#2EE69B); --glow-primary:0 0 24px rgba(182,255,46,.35); } [data-theme="vapor"]{ --bg:#0B0716;--bg-2:#140D26;--surface:#1B1233;--surface-2:#251943; --primary:#FF71CE;--primary-2:#FF9DDE;--secondary:#01CDFE;--accent:#B967FF; --grad-brand:linear-gradient(120deg,#FF71CE,#B967FF 50%,#01CDFE); --grad-cta:linear-gradient(120deg,#FF71CE,#B967FF); --glow-primary:0 0 24px rgba(255,113,206,.45); } [data-theme="ocean-drip"]{ --bg:#040C12;--bg-2:#08141D;--surface:#0D1C28;--surface-2:#132634; --primary:#2EE6FF;--primary-2:#7AF0FF;--secondary:#2E8BFF;--accent:#8AFFEA; --grad-brand:linear-gradient(120deg,#2EE6FF,#2E8BFF); --grad-cta:linear-gradient(120deg,#2EC6E6,#2E7BE6); --glow-primary:0 0 24px rgba(46,230,255,.4); } [data-theme="mocha"]{ --bg:#0F0A07;--bg-2:#17100B;--surface:#1F1610;--surface-2:#2A1E16; --primary:#D9A87C;--primary-2:#EAC6A3;--secondary:#A86F4C;--accent:#F2E3CE; --text:#FBF3E8;--muted:#BCA68F; --grad-brand:linear-gradient(120deg,#D9A87C,#A86F4C); --grad-cta:linear-gradient(120deg,#C99463,#9C5F3D); --glow-primary:0 0 24px rgba(217,168,124,.35); } /* ── FRIENDSHIP ───────────────────────────────────────── */ [data-theme="sunset-squad"]{ --bg:#100708;--bg-2:#1A0C0D;--surface:#221013;--surface-2:#2D161A; --primary:#FF8A5C;--primary-2:#FFAD85;--secondary:#FF5C8A;--accent:#FFD485; --grad-brand:linear-gradient(120deg,#FF8A5C,#FF5C8A); --grad-cta:linear-gradient(120deg,#FF7A4C,#FF4C7A); --glow-primary:0 0 24px rgba(255,138,92,.4); } [data-theme="mint-gang"]{ --bg:#04100C;--bg-2:#081A14;--surface:#0D231B;--surface-2:#132E24; --primary:#3DDC97;--primary-2:#7AE8B8;--secondary:#2EB6FF;--accent:#C8FFE3; --grad-brand:linear-gradient(120deg,#3DDC97,#2EB6FF); --grad-cta:linear-gradient(120deg,#34C487,#28A0E0); --glow-primary:0 0 24px rgba(61,220,151,.35); } [data-theme="indigo-crew"]{ --bg:#070818;--bg-2:#0D0F28;--surface:#131637;--surface-2:#1B1F47; --primary:#6C7BFF;--primary-2:#96A1FF;--secondary:#B66CFF;--accent:#6CFFE8; --grad-brand:linear-gradient(120deg,#6C7BFF,#B66CFF); --grad-cta:linear-gradient(120deg,#5C6BF2,#A35CF2); --glow-primary:0 0 24px rgba(108,123,255,.45); } [data-theme="campfire"]{ --bg:#0E0A05;--bg-2:#181009;--surface:#20160C;--surface-2:#2B1E11; --primary:#FF9F2E;--primary-2:#FFBC6B;--secondary:#FF5C2E;--accent:#FFE3B8; --grad-brand:linear-gradient(120deg,#FF9F2E,#FF5C2E); --grad-cta:linear-gradient(120deg,#F2902E,#E64C24); --glow-primary:0 0 24px rgba(255,159,46,.4); }