/* Future Self — Design tokens ────────────────────────────────────────────────────── Light mode is default; dark mode flips via either the user OS setting OR an explicit data-theme on . */ :root { /* Brand */ --fs-brand-purple : #7c4dff; --fs-brand-cyan : #4fc3f7; --fs-brand-aqua : #00e5ff; --fs-brand-violet : #b388ff; --fs-brand-pink : #ec4899; --fs-brand-mint : #10b981; /* Light surface palette */ --fs-bg : #fbfbff; --fs-bg-soft : #f3f4ff; --fs-bg-elev : #ffffff; --fs-bg-glass : rgba(255,255,255,0.55); --fs-bg-section : #f7f8fc; --fs-bg-section-2 : #ffffff; --fs-fg : #1f2937; --fs-fg-strong : #0f1530; --fs-fg-muted : #4b5563; --fs-fg-faint : #6b7280; --fs-border : rgba(15, 21, 48, 0.10); --fs-border-strong : rgba(15, 21, 48, 0.18); --fs-glow-purple : rgba(124,77,255,0.18); --fs-glow-cyan : rgba(79,195,247,0.18); --fs-glow-aqua : rgba(0,229,255,0.20); --fs-shadow-sm : 0 1px 3px rgba(15,21,48,.06); --fs-shadow-md : 0 8px 30px rgba(15,21,48,.08); --fs-shadow-lg : 0 20px 60px rgba(15,21,48,.14); /* Hero / canvas tints (used by the JS) */ --fs-canvas-bg : #fafbff; --fs-star-color : 30, 40, 80; --fs-grid-color : 30, 80, 130; /* Type */ --fs-font-display : 'Syne','Inter','DM Sans',-apple-system,BlinkMacSystemFont,sans-serif; --fs-font-body : 'DM Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; /* Type scale (fluid) */ --fs-step--2 : clamp(0.69rem, 0.66rem + 0.14vw, 0.78rem); --fs-step--1 : clamp(0.83rem, 0.78rem + 0.23vw, 0.97rem); --fs-step-0 : clamp(1.00rem, 0.93rem + 0.36vw, 1.22rem); --fs-step-1 : clamp(1.20rem, 1.10rem + 0.52vw, 1.53rem); --fs-step-2 : clamp(1.44rem, 1.30rem + 0.73vw, 1.91rem); --fs-step-3 : clamp(1.73rem, 1.53rem + 1.00vw, 2.39rem); --fs-step-4 : clamp(2.07rem, 1.80rem + 1.36vw, 2.99rem); --fs-step-5 : clamp(2.49rem, 2.12rem + 1.84vw, 3.73rem); --fs-step-6 : clamp(2.99rem, 2.49rem + 2.48vw, 4.67rem); /* Spacing scale */ --fs-space-1 : clamp(.25rem, .22rem + 0.15vw, .375rem); --fs-space-2 : clamp(.5rem, .45rem + 0.25vw, .75rem); --fs-space-3 : clamp(.75rem, .65rem + 0.5vw, 1.25rem); --fs-space-4 : clamp(1rem, .85rem + 0.75vw, 1.75rem); --fs-space-5 : clamp(1.5rem, 1.2rem + 1.5vw, 3rem); --fs-space-6 : clamp(2rem, 1.5rem + 2.5vw, 4.5rem); --fs-space-7 : clamp(3rem, 2.2rem + 4vw, 7rem); /* Radii */ --fs-radius-sm : 6px; --fs-radius-md : 12px; --fs-radius-lg : 18px; --fs-radius-xl : 28px; --fs-radius-pill: 999px; /* Motion */ --fs-ease-out : cubic-bezier(.22,1,.36,1); --fs-ease-in : cubic-bezier(.55,.06,.68,.19); --fs-ease-bouncy: cubic-bezier(.34,1.56,.64,1); --fs-dur-fast : 220ms; --fs-dur-base : 420ms; --fs-dur-slow : 800ms; /* z-index */ --fs-z-canvas : 0; --fs-z-deco : 1; --fs-z-base : 2; --fs-z-ui : 10; --fs-z-toggle : 50; --fs-z-toast : 100; } /* ────────────────────────────────────────────────────── */ /* Dark mode: triggered by OS preference or explicit attr */ /* ────────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fs-bg : #040408; --fs-bg-soft : #0a0a1a; --fs-bg-elev : #0e0e22; --fs-bg-glass : rgba(255,255,255,0.028); --fs-bg-section : #060611; --fs-bg-section-2 : #08081a; --fs-fg : #f0f4ff; --fs-fg-strong : #ffffff; --fs-fg-muted : rgba(200,210,240,0.62); --fs-fg-faint : rgba(150,165,200,0.42); --fs-border : rgba(255,255,255,0.07); --fs-border-strong : rgba(255,255,255,0.16); --fs-glow-purple : rgba(124,77,255,0.40); --fs-glow-cyan : rgba(79,195,247,0.35); --fs-glow-aqua : rgba(0,229,255,0.45); --fs-shadow-sm : 0 1px 4px rgba(0,0,0,.40); --fs-shadow-md : 0 14px 40px rgba(0,0,0,.45); --fs-shadow-lg : 0 20px 60px rgba(0,0,0,.55); --fs-canvas-bg : #040408; --fs-star-color : 190, 210, 255; --fs-grid-color : 79, 195, 247; } } /* Manual dark override */ html[data-theme="dark"] { --fs-bg : #040408; --fs-bg-soft : #0a0a1a; --fs-bg-elev : #0e0e22; --fs-bg-glass : rgba(255,255,255,0.028); --fs-bg-section : #060611; --fs-bg-section-2 : #08081a; --fs-fg : #f0f4ff; --fs-fg-strong : #ffffff; --fs-fg-muted : rgba(200,210,240,0.62); --fs-fg-faint : rgba(150,165,200,0.42); --fs-border : rgba(255,255,255,0.07); --fs-border-strong : rgba(255,255,255,0.16); --fs-glow-purple : rgba(124,77,255,0.40); --fs-glow-cyan : rgba(79,195,247,0.35); --fs-glow-aqua : rgba(0,229,255,0.45); --fs-shadow-sm : 0 1px 4px rgba(0,0,0,.40); --fs-shadow-md : 0 14px 40px rgba(0,0,0,.45); --fs-shadow-lg : 0 20px 60px rgba(0,0,0,.55); --fs-canvas-bg : #040408; --fs-star-color : 190, 210, 255; --fs-grid-color : 79, 195, 247; } /* Manual light override (in case OS is dark) */ html[data-theme="light"] { --fs-bg : #fbfbff; --fs-bg-soft : #f3f4ff; --fs-bg-elev : #ffffff; --fs-bg-glass : rgba(255,255,255,0.55); --fs-bg-section : #f7f8fc; --fs-bg-section-2 : #ffffff; --fs-fg : #1f2937; --fs-fg-strong : #0f1530; --fs-fg-muted : #4b5563; --fs-fg-faint : #6b7280; --fs-border : rgba(15, 21, 48, 0.10); --fs-border-strong : rgba(15, 21, 48, 0.18); --fs-glow-purple : rgba(124,77,255,0.18); --fs-glow-cyan : rgba(79,195,247,0.18); --fs-glow-aqua : rgba(0,229,255,0.20); --fs-canvas-bg : #fafbff; --fs-star-color : 30, 40, 80; --fs-grid-color : 30, 80, 130; }