/* ============================================================ Design tokens — single source of truth for theme + scale. Flip themes by setting `data-theme="dark"` on . ============================================================ */ :root, [data-theme="light"] { /* Surfaces */ --bg: #f4f2ec; /* warm off-white */ --bg-elev: #ffffff; --surface: #ebe8df; --surface-2: #e1ddd1; /* Ink */ --fg: #0f0f0e; --fg-soft: #2a2a27; --muted: #6c6a63; --muted-2: #908d83; --line: rgba(15, 15, 14, 0.10); --line-strong: rgba(15, 15, 14, 0.18); /* Accent — primary (blue, ONE role: drag-me sticker) + orange family + neon hover. */ --accent: #2747ff; --accent-ink: #ffffff; --accent-2: #ff3a14; /* very vibrant electric orange — single shade everywhere */ --accent-2-ink: #ffffff; --accent-2-soft: #ffa178; /* kept for legacy gradients; no longer the pill bg */ --neon: #39ff14; /* high-voltage green, used on the pill's hover state */ --neon-ink: #0f0f0e; --available: #2bb673; /* green only for "Available for work" — universal signal */ --grid: rgba(15, 15, 14, 0.07); /* Misc */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04); --shadow-lg: 0 8px 40px rgba(0,0,0,0.08), 0 24px 80px rgba(0,0,0,0.06); --selection-bg: #ff5a1f; --selection-fg: #0f0f0e; } [data-theme="dark"] { --bg: #0b0b0c; --bg-elev: #131315; --surface: #16161a; --surface-2: #1c1c20; --fg: #f3f1ea; --fg-soft: #d8d5cc; --muted: #8a8780; --muted-2: #6a6862; --line: rgba(243, 241, 234, 0.10); --line-strong: rgba(243, 241, 234, 0.20); --accent: #93a8ff; --accent-ink: #0b0b0c; --accent-2: #ff5728; /* vibrant orange, dark-mode tuned */ --accent-2-ink: #0b0b0c; --accent-2-soft: #ffa988; --neon: #39ff14; --neon-ink: #0b0b0c; --available: #3fd089; --grid: rgba(243, 241, 234, 0.05); --shadow-sm: 0 1px 2px rgba(0,0,0,0.40), 0 4px 16px rgba(0,0,0,0.32); --shadow-lg: 0 8px 40px rgba(0,0,0,0.50), 0 24px 80px rgba(0,0,0,0.40); --selection-bg: #ff7a3d; --selection-fg: #0b0b0c; } /* ----- Typography scale ----- */ :root { --font-display: "Fraunces", "Times New Roman", ui-serif, Georgia, serif; --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Fluid type using clamp(min, vw, max) */ --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem); --fs-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.95rem); --fs-base: clamp(1rem, 0.95rem + 0.2vw, 1.08rem); --fs-md: clamp(1.125rem, 1.05rem + 0.4vw, 1.35rem); --fs-lg: clamp(1.5rem, 1.3rem + 1vw, 2.1rem); --fs-xl: clamp(2.25rem, 1.7rem + 2.6vw, 4rem); --fs-2xl: clamp(3rem, 2rem + 5vw, 7rem); --fs-3xl: clamp(4rem, 2.5rem + 8vw, 11rem); --lh-tight: 1.05; --lh-snug: 1.18; --lh-normal: 1.45; --lh-relaxed: 1.65; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 7rem; --space-10: 10rem; /* Layout */ --maxw: 1440px; --pad-x: clamp(1.25rem, 3vw, 3rem); --radius-sm: 6px; --radius: 14px; --radius-lg: 22px; --radius-xl: 32px; /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 180ms; --dur: 320ms; --dur-slow: 600ms; }