/* Gen Z Theme Pack 24 — v1.2.0
Usage: ... then style everything with var(--tp-*).
Re-brand per app: html { --tp-h: 312; } — must be declared on the SAME element as the theme block.
Runtime switch: document.documentElement.dataset.theme = 'liquid';
Reveals: see reveal.js — . Keyframe names and timing
come from --tp-reveal / --tp-dur-slow / --tp-stagger / --tp-reveal-dist.
Image treatment: wrap every photo in a container and apply
border-radius:var(--tp-img-r); border:var(--tp-img-frame); box-shadow:var(--tp-img-sh);
filter:var(--tp-img-filter); transform:rotate(var(--tp-img-tilt)); aspect-ratio:var(--tp-img-ar);
then layer an accent overlay:
background:var(--tp-grad); opacity:var(--tp-img-overlay-op); mix-blend-mode:var(--tp-img-blend);
*/
@keyframes tp-pop{0%{transform:scale(.88);opacity:0}62%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
@keyframes tp-up{from{transform:translateY(var(--tp-reveal-dist,16px));opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes tp-down{from{transform:translateY(-16px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes tp-sheet{from{transform:translateY(102%)}to{transform:translateY(0)}}
@keyframes tp-fade{from{opacity:0}to{opacity:1}}
@keyframes tp-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes tp-curtain{from{clip-path:inset(100% 0 0 0);transform:translateY(var(--tp-reveal-dist,16px))}to{clip-path:inset(0 0 0 0);transform:translateY(0)}}
@keyframes tp-rise{from{clip-path:inset(0 0 100% 0);transform:translateY(var(--tp-reveal-dist,16px))}to{clip-path:inset(0 0 0 0);transform:translateY(0)}}
@keyframes tp-blur-in{from{opacity:0;filter:blur(16px);transform:scale(1.05) translateY(var(--tp-reveal-dist,16px))}to{opacity:1;filter:blur(0);transform:scale(1) translateY(0)}}
@keyframes tp-glitch{0%{opacity:0;transform:translate3d(-6px,0,0);clip-path:inset(40% 0 38% 0)}18%{opacity:1;transform:translate3d(5px,0,0);clip-path:inset(12% 0 62% 0)}36%{transform:translate3d(-3px,0,0);clip-path:inset(68% 0 6% 0)}54%{transform:translate3d(2px,0,0);clip-path:inset(0 0 0 0)}72%{transform:translate3d(-1px,0,0)}100%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
@keyframes tp-tape{from{opacity:0;transform:rotate(-9deg) translateY(var(--tp-reveal-dist,16px)) scale(.95)}to{opacity:1;transform:rotate(var(--tp-img-tilt,0deg)) translateY(0) scale(1)}}
@keyframes tp-zoom{from{transform:scale(1.16)}to{transform:scale(1)}}
@keyframes tp-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tp-shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(3px)}50%{transform:translateX(-4px)}}
@keyframes tp-pulse{0%,100%{opacity:1}50%{opacity:.42}}
@keyframes tp-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes tp-shimmer{from{background-position:-160% 0}to{background-position:260% 0}}
@keyframes tp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes tp-spin{to{transform:rotate(360deg)}}
@keyframes tp-blink{50%{opacity:0}}
@keyframes tp-tilt{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes tp-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4%,-3%,0) scale(1.12)}100%{transform:translate3d(0,0,0) scale(1)}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}}
/* SLAB SHOCK — Neubrutalist (loud)
voice: Loud, blunt, all-caps. Dares the user into action.
art: Hard flash photography, subjects cut out and slammed onto the accent. Thick keylines, no soft focus, no gradients behind a photo. */
[data-theme="slab-shock"]{
--tp-img-r:4px;
--tp-img-frame:3px solid #0a0a0a;
--tp-img-sh:7px 7px 0 #0a0a0a;
--tp-img-filter:contrast(1.12) saturate(1.2);
--tp-img-overlay-op:0.18;
--tp-img-blend:hard-light;
--tp-img-tilt:0deg;
--tp-img-ar:4 / 5;
--tp-bg:oklch(0.95 0.07 calc(var(--tp-h) + 0));
--tp-canvas:oklch(0.95 0.07 calc(var(--tp-h) + 0));
--tp-surf:#ffffff;
--tp-surf-2:oklch(0.9 0.13 calc(var(--tp-h) + 0));
--tp-ink:#0a0a0a;
--tp-mute:#5a5a5a;
--tp-acc:oklch(0.86 0.22 calc(var(--tp-h) + 0));
--tp-acc-2:oklch(0.62 0.25 calc(var(--tp-h) + 70));
--tp-acc-ink:#0a0a0a;
--tp-line:#0a0a0a;
--tp-grad:linear-gradient(135deg, oklch(0.86 0.22 calc(var(--tp-h) + 0)), oklch(0.78 0.2 calc(var(--tp-h) + 60)));
--tp-r:6px;
--tp-r-sm:4px;
--tp-r-lg:10px;
--tp-r-btn:6px;
--tp-sh:7px 7px 0 #0a0a0a;
--tp-sh-sm:3px 3px 0 #0a0a0a;
--tp-bw:3px;
--tp-font-display:'Archivo Black', system-ui;
--tp-font-body:'Space Grotesk', system-ui;
--tp-font-mono:'JetBrains Mono', monospace;
--tp-w-display:900;
--tp-track-display:-0.02em;
--tp-case-display:uppercase;
--tp-hero:76px;
--tp-dur:130ms;
--tp-ease:cubic-bezier(.2,1.5,.4,1);
--tp-press:0.955;
--tp-dur-slow:380ms;
--tp-stagger:50ms;
--tp-reveal:tp-wipe;
--tp-reveal-dist:22px;
--tp-tex:none;
--tp-blur:none;
}
/* PAPER PRESS — Neubrutalist (restrained)
voice: Dry, editorial, quietly confident. Print-shop energy.
art: Halftone two-ink printing. Treat every photo as if it were run on newsprint; captions in mono underneath. */
[data-theme="paper-press"]{
--tp-img-r:2px;
--tp-img-frame:1.5px solid #17140f;
--tp-img-sh:4px 4px 0 #17140f;
--tp-img-filter:grayscale(0.72) contrast(1.08) sepia(0.12);
--tp-img-overlay-op:0.12;
--tp-img-blend:multiply;
--tp-img-tilt:0deg;
--tp-img-ar:3 / 2;
--tp-bg:oklch(0.96 0.03 calc(var(--tp-h) + 0));
--tp-canvas:oklch(0.96 0.03 calc(var(--tp-h) + 0));
--tp-surf:#fffdf8;
--tp-surf-2:oklch(0.92 0.05 calc(var(--tp-h) + 0));
--tp-ink:#17140f;
--tp-mute:#6d6355;
--tp-acc:oklch(0.78 0.14 calc(var(--tp-h) + 0));
--tp-acc-2:oklch(0.74 0.13 calc(var(--tp-h) + 150));
--tp-acc-ink:#17140f;
--tp-line:#17140f;
--tp-grad:linear-gradient(135deg, oklch(0.82 0.12 calc(var(--tp-h) + 0)), oklch(0.86 0.09 calc(var(--tp-h) + 40)));
--tp-r:3px;
--tp-r-sm:2px;
--tp-r-lg:5px;
--tp-r-btn:3px;
--tp-sh:4px 4px 0 #17140f;
--tp-sh-sm:2px 2px 0 #17140f;
--tp-bw:1.5px;
--tp-font-display:'Bricolage Grotesque', system-ui;
--tp-font-body:'Space Grotesk', system-ui;
--tp-font-mono:'JetBrains Mono', monospace;
--tp-w-display:800;
--tp-track-display:-0.015em;
--tp-case-display:none;
--tp-hero:66px;
--tp-dur:190ms;
--tp-ease:cubic-bezier(.3,.9,.2,1);
--tp-press:0.98;
--tp-dur-slow:520ms;
--tp-stagger:70ms;
--tp-reveal:tp-curtain;
--tp-reveal-dist:18px;
--tp-tex:none;
--tp-blur:none;
}
/* LIQUID — Glassy (loud)
voice: Premium, smooth, low-volume flex. Nothing shouts.
art: Night photography and dark product renders. Light bloom, deep blacks, glass and liquid reflections. */
[data-theme="liquid"]{
--tp-img-r:22px;
--tp-img-frame:1px solid rgba(255,255,255,.22);
--tp-img-sh:0 18px 50px rgba(0,0,0,.48);
--tp-img-filter:saturate(1.1) brightness(0.94);
--tp-img-overlay-op:0.3;
--tp-img-blend:screen;
--tp-img-tilt:0deg;
--tp-img-ar:16 / 9;
--tp-bg:oklch(0.17 0.03 268);
--tp-canvas:radial-gradient(120% 90% at 18% 0%, oklch(0.48 0.19 calc(var(--tp-h) + 0)) 0%, transparent 58%), radial-gradient(100% 80% at 92% 18%, oklch(0.52 0.17 calc(var(--tp-h) + 70)) 0%, transparent 55%), oklch(0.15 0.03 268);
--tp-surf:rgba(255,255,255,0.10);
--tp-surf-2:rgba(255,255,255,0.18);
--tp-ink:#ffffff;
--tp-mute:rgba(255,255,255,0.68);
--tp-acc:oklch(0.74 0.2 calc(var(--tp-h) + 0));
--tp-acc-2:oklch(0.8 0.17 calc(var(--tp-h) + 80));
--tp-acc-ink:#0b0b14;
--tp-line:rgba(255,255,255,0.22);
--tp-grad:linear-gradient(135deg, oklch(0.74 0.2 calc(var(--tp-h) + 0)), oklch(0.82 0.16 calc(var(--tp-h) + 90)));
--tp-r:22px;
--tp-r-sm:13px;
--tp-r-lg:30px;
--tp-r-btn:99px;
--tp-sh:0 18px 50px rgba(0,0,0,.48);
--tp-sh-sm:0 8px 24px rgba(0,0,0,.34);
--tp-bw:1px;
--tp-font-display:'Sora', system-ui;
--tp-font-body:'Sora', system-ui;
--tp-font-mono:'JetBrains Mono', monospace;
--tp-w-display:700;
--tp-track-display:-0.03em;
--tp-case-display:none;
--tp-hero:80px;
--tp-dur:320ms;
--tp-ease:cubic-bezier(.32,.72,0,1);
--tp-press:0.97;
--tp-dur-slow:720ms;
--tp-stagger:80ms;
--tp-reveal:tp-blur-in;
--tp-reveal-dist:26px;
--tp-tex:none;
--tp-blur:blur(22px) saturate(1.5);
}
/* FROST — Glassy (restrained)
voice: Clean, reassuring, native-feeling. Zero friction.
art: Daylight photography with a lot of white, shallow depth of field, one subject. Calm and uncluttered. */
[data-theme="frost"]{
--tp-img-r:20px;
--tp-img-frame:1px solid rgba(12,24,48,.10);
--tp-img-sh:0 10px 34px rgba(18,30,60,.12);
--tp-img-filter:saturate(1.04) brightness(1.02);
--tp-img-overlay-op:0.12;
--tp-img-blend:normal;
--tp-img-tilt:0deg;
--tp-img-ar:16 / 10;
--tp-bg:oklch(0.97 0.008 232);
--tp-canvas:linear-gradient(180deg, oklch(0.94 0.04 calc(var(--tp-h) + 0)), oklch(0.985 0.004 232));
--tp-surf:rgba(255,255,255,0.74);
--tp-surf-2:oklch(0.92 0.05 calc(var(--tp-h) + 0));
--tp-ink:oklch(0.22 0.02 250);
--tp-mute:oklch(0.52 0.02 250);
--tp-acc:oklch(0.66 0.16 calc(var(--tp-h) + 0));
--tp-acc-2:oklch(0.7 0.14 calc(var(--tp-h) + 60));
--tp-acc-ink:#ffffff;
--tp-line:rgba(12,24,48,0.10);
--tp-grad:linear-gradient(135deg, oklch(0.62 0.17 calc(var(--tp-h) + 0)), oklch(0.7 0.14 calc(var(--tp-h) + 50)));
--tp-r:20px;
--tp-r-sm:12px;
--tp-r-lg:26px;
--tp-r-btn:14px;
--tp-sh:0 10px 34px rgba(18,30,60,.12);
--tp-sh-sm:0 4px 16px rgba(18,30,60,.09);
--tp-bw:1px;
--tp-font-display:'Plus Jakarta Sans', system-ui;
--tp-font-body:'Plus Jakarta Sans', system-ui;
--tp-font-mono:'JetBrains Mono', monospace;
--tp-w-display:800;
--tp-track-display:-0.025em;
--tp-case-display:none;
--tp-hero:70px;
--tp-dur:280ms;
--tp-ease:cubic-bezier(.32,.72,0,1);
--tp-press:0.975;
--tp-dur-slow:620ms;
--tp-stagger:70ms;
--tp-reveal:tp-up;
--tp-reveal-dist:22px;
--tp-tex:none;
--tp-blur:blur(18px);
}
/* CHROMEBABY — Y2K chrome (loud)
voice: Bubbly millennium mall. Exclamation-adjacent but never cringe.
art: Chrome 3D renders, liquid-metal blobs, lens flares and star stickers. CD-ROM era, rendered not photographed. */
[data-theme="chromebaby"]{
--tp-img-r:18px;
--tp-img-frame:2px solid oklch(0.62 0.05 292);
--tp-img-sh:0 8px 0 oklch(0.68 0.05 292), 0 14px 30px rgba(40,20,70,.22);
--tp-img-filter:saturate(1.35) contrast(1.06);
--tp-img-overlay-op:0.35;
--tp-img-blend:hard-light;
--tp-img-tilt:-1.5deg;
--tp-img-ar:1 / 1;
--tp-bg:oklch(0.9 0.02 292);
--tp-canvas:linear-gradient(165deg, oklch(0.95 0.015 292), oklch(0.82 0.07 calc(var(--tp-h) + 0)) 45%, oklch(0.97 0.01 292));
--tp-surf:linear-gradient(180deg, #ffffff, oklch(0.88 0.035 292));
--tp-surf-2:oklch(0.86 0.06 calc(var(--tp-h) + 0));
--tp-ink:#14101c;
--tp-mute:#5e5470;
--tp-acc:oklch(0.72 0.21 calc(var(--tp-h) + 0));
--tp-acc-2:oklch(0.76 0.18 calc(var(--tp-h) + 200));
--tp-acc-ink:#14101c;
--tp-line:oklch(0.62 0.05 292);
--tp-grad:linear-gradient(135deg, #ffffff, oklch(0.72 0.21 calc(var(--tp-h) + 0)) 40%, oklch(0.78 0.17 calc(var(--tp-h) + 200)));
--tp-r:18px;
--tp-r-sm:10px;
--tp-r-lg:24px;
--tp-r-btn:99px;
--tp-sh:0 8px 0 oklch(0.68 0.05 292), 0 14px 30px rgba(40,20,70,.22);
--tp-sh-sm:0 4px 0 oklch(0.72 0.04 292);
--tp-bw:2px;
--tp-font-display:'Syne', system-ui;
--tp-font-body:'Space Grotesk', system-ui;
--tp-font-mono:'JetBrains Mono', monospace;
--tp-w-display:800;
--tp-track-display:-0.02em;
--tp-case-display:uppercase;
--tp-hero:74px;
--tp-dur:220ms;
--tp-ease:cubic-bezier(.34,1.56,.64,1);
--tp-press:0.96;
--tp-dur-slow:520ms;
--tp-stagger:60ms;
--tp-reveal:tp-pop;
--tp-reveal-dist:16px;
--tp-tex:none;
--tp-blur:none;
}
/* BUBBLEPOP — Y2K chrome (restrained)
voice: Friendly, soft, slightly silly. Never mean to the user.
art: Glossy 3D bubbles and cute product shots on candy backdrops. Rounded everything, bright even lighting. */
[data-theme="bubblepop"]{
--tp-img-r:22px;
--tp-img-frame:2px solid oklch(0.78 0.09 calc(var(--tp-h) + 0));
--tp-img-sh:0 6px 0 oklch(0.88 0.06 calc(var(--tp-h) + 0));
--tp-img-filter:saturate(1.2) brightness(1.03);
--tp-img-overlay-op:0.2;
--tp-img-blend:normal;
--tp-img-tilt:-2deg;
--tp-img-ar:1 / 1;
--tp-bg:oklch(0.96 0.03 calc(var(--tp-h) + 0));
--tp-canvas:linear-gradient(180deg, oklch(0.96 0.035 calc(var(--tp-h) + 0)), oklch(0.98 0.01 336));
--tp-surf:#ffffff;
--tp-surf-2:oklch(0.93 0.05 calc(var(--tp-h) + 0));
--tp-ink:#1d1220;
--tp-mute:#6f5a6b;
--tp-acc:oklch(0.76 0.16 calc(var(--tp-h) + 0));
--tp-acc-2:oklch(0.78 0.14 calc(var(--tp-h) + 260));
--tp-acc-ink:#1d1220;
--tp-line:oklch(0.78 0.09 calc(var(--tp-h) + 0));
--tp-grad:linear-gradient(135deg, oklch(0.8 0.14 calc(var(--tp-h) + 0)), oklch(0.82 0.12 calc(var(--tp-h) + 280)));
--tp-r:22px;
--tp-r-sm:14px;
--tp-r-lg:28px;
--tp-r-btn:99px;
--tp-sh:0 6px 0 oklch(0.86 0.08 calc(var(--tp-h) + 0)), 0 12px 24px rgba(80,30,70,.12);
--tp-sh-sm:0 3px 0 oklch(0.88 0.06 calc(var(--tp-h) + 0));
--tp-bw:2px;
--tp-font-display:'Baloo 2', system-ui;
--tp-font-body:'Outfit', system-ui;
--tp-font-mono:'JetBrains Mono', monospace;
--tp-w-display:800;
--tp-track-display:-0.01em;
--tp-case-display:none;
--tp-hero:70px;
--tp-dur:240ms;
--tp-ease:cubic-bezier(.34,1.5,.64,1);
--tp-press:0.965;
--tp-dur-slow:560ms;
--tp-stagger:70ms;
--tp-reveal:tp-pop;
--tp-reveal-dist:18px;
--tp-tex:none;
--tp-blur:none;
}
/* AFTERHOURS — Dark neon (loud)
voice: 3am energy. Short, electric, a little unhinged.
art: Flash-lit night crowds, motion blur, neon spill. Duotone the accent into the highlights — never leave a photo neutral. */
[data-theme="afterhours"]{
--tp-img-r:14px;
--tp-img-frame:1px solid oklch(0.5 0.16 calc(var(--tp-h) + 0));
--tp-img-sh:0 0 34px oklch(0.45 0.22 calc(var(--tp-h) + 0));
--tp-img-filter:saturate(1.4) contrast(1.16) brightness(0.9);
--tp-img-overlay-op:0.42;
--tp-img-blend:screen;
--tp-img-tilt:0deg;
--tp-img-ar:4 / 5;
--tp-bg:oklch(0.13 0.02 322);
--tp-canvas:radial-gradient(90% 60% at 50% 0%, oklch(0.34 0.2 calc(var(--tp-h) + 0)) 0%, transparent 60%), oklch(0.11 0.02 322);
--tp-surf:oklch(0.19 0.03 322);
--tp-surf-2:oklch(0.25 0.05 322);
--tp-ink:#ffffff;
--tp-mute:oklch(0.7 0.03 322);
--tp-acc:oklch(0.74 0.26 calc(var(--tp-h) + 0));
--tp-acc-2:oklch(0.8 0.2 calc(var(--tp-h) + 180));
--tp-acc-ink:#0a0008;
--tp-line:oklch(0.5 0.16 calc(var(--tp-h) + 0));
--tp-grad:linear-gradient(135deg, oklch(0.72 0.26 calc(var(--tp-h) + 0)), oklch(0.8 0.2 calc(var(--tp-h) + 190)));
--tp-r:14px;
--tp-r-sm:8px;
--tp-r-lg:20px;
--tp-r-btn:12px;
--tp-sh:0 0 0 1px oklch(0.6 0.2 calc(var(--tp-h) + 0)), 0 14px 44px oklch(0.45 0.22 calc(var(--tp-h) + 0));
--tp-sh-sm:0 0 22px oklch(0.5 0.2 calc(var(--tp-h) + 0));
--tp-bw:1px;
--tp-font-display:'Space Grotesk', system-ui;
--tp-font-body:'Space Grotesk', system-ui;
--tp-font-mono:'JetBrains Mono', monospace;
--tp-w-display:700;
--tp-track-display:0.02em;
--tp-case-display:uppercase;
--tp-hero:80px;
--tp-dur:160ms;
--tp-ease:cubic-bezier(.2,1.2,.3,1);
--tp-press:0.96;
--tp-dur-slow:420ms;
--tp-stagger:40ms;
--tp-reveal:tp-glitch;
--tp-reveal-dist:14px;
--tp-tex:none;
--tp-blur:none;
}
/* MIDNIGHT LANE — Dark neon (restrained)
voice: Calm night mode. Supportive without being soft.
art: Cinematic low-light stills, single light source, generous negative space. */
[data-theme="midnight-lane"]{
--tp-img-r:16px;
--tp-img-frame:1px solid oklch(0.32 0.03 256);
--tp-img-sh:0 12px 32px rgba(0,0,0,.5);
--tp-img-filter:saturate(0.95) brightness(0.92);
--tp-img-overlay-op:0.22;
--tp-img-blend:luminosity;
--tp-img-tilt:0deg;
--tp-img-ar:16 / 9;
--tp-bg:oklch(0.16 0.025 256);
--tp-canvas:oklch(0.14 0.025 256);
--tp-surf:oklch(0.21 0.03 256);
--tp-surf-2:oklch(0.27 0.035 256);
--tp-ink:oklch(0.97 0.005 256);
--tp-mute:oklch(0.68 0.02 256);
--tp-acc:oklch(0.7 0.19 calc(var(--tp-h) + 0));
--tp-acc-2:oklch(0.74 0.16 calc(var(--tp-h) + 60));
--tp-acc-ink:#0a0e18;
--tp-line:oklch(0.32 0.03 256);
--tp-grad:linear-gradient(135deg, oklch(0.68 0.19 calc(var(--tp-h) + 0)), oklch(0.74 0.15 calc(var(--tp-h) + 40)));
--tp-r:16px;
--tp-r-sm:9px;
--tp-r-lg:20px;
--tp-r-btn:12px;
--tp-sh:0 12px 32px rgba(0,0,0,.5);
--tp-sh-sm:0 5px 16px rgba(0,0,0,.4);
--tp-bw:1px;
--tp-font-display:'Sora', system-ui;
--tp-font-body:'Sora', system-ui;
--tp-font-mono:'JetBrains Mono', monospace;
--tp-w-display:600;
--tp-track-display:-0.02em;
--tp-case-display:none;
--tp-hero:72px;
--tp-dur:260ms;
--tp-ease:cubic-bezier(.32,.72,0,1);
--tp-press:0.975;
--tp-dur-slow:660ms;
--tp-stagger:80ms;
--tp-reveal:tp-up;
--tp-reveal-dist:24px;
--tp-tex:none;
--tp-blur:none;
}
/* MARSHMALLOW — Pastel wellness (loud)
voice: Warm, encouraging, zero shame. Cheers, never nags.
art: Soft pastel lifestyle photography and rounded 3D illustration. Nothing sharp, nothing dark, no hard shadows. */
[data-theme="marshmallow"]{
--tp-img-r:26px;
--tp-img-frame:none;
--tp-img-sh:0 12px 28px oklch(0.86 0.08 calc(var(--tp-h) + 0));
--tp-img-filter:saturate(1.1) brightness(1.05);
--tp-img-overlay-op:0.18;
--tp-img-blend:normal;
--tp-img-tilt:0deg;
--tp-img-ar:4 / 5;
--tp-bg:oklch(0.95 0.045 calc(var(--tp-h) + 0));
--tp-canvas:linear-gradient(170deg, oklch(0.95 0.05 calc(var(--tp-h) + 0)), oklch(0.94 0.05 calc(var(--tp-h) + 60)));
--tp-surf:#fffdfe;
--tp-surf-2:oklch(0.92 0.06 calc(var(--tp-h) + 30));
--tp-ink:#2a1c24;
--tp-mute:#79616e;
--tp-acc:oklch(0.78 0.15 calc(var(--tp-h) + 0));
--tp-acc-2:oklch(0.8 0.13 calc(var(--tp-h) + 180));
--tp-acc-ink:#2a1c24;
--tp-line:oklch(0.82 0.07 calc(var(--tp-h) + 0));
--tp-grad:linear-gradient(135deg, oklch(0.82 0.13 calc(var(--tp-h) + 0)), oklch(0.84 0.11 calc(var(--tp-h) + 190)));
--tp-r:26px;
--tp-r-sm:16px;
--tp-r-lg:32px;
--tp-r-btn:99px;
--tp-sh:0 12px 28px oklch(0.86 0.08 calc(var(--tp-h) + 0));
--tp-sh-sm:0 6px 16px oklch(0.88 0.06 calc(var(--tp-h) + 0));
--tp-bw:0px;
--tp-font-display:'Baloo 2', system-ui;
--tp-font-body:'Outfit', system-ui;
--tp-font-mono:'JetBrains Mono', monospace;
--tp-w-display:800;
--tp-track-display:-0.01em;
--tp-case-display:none;
--tp-hero:72px;
--tp-dur:300ms;
--tp-ease:cubic-bezier(.34,1.4,.64,1);
--tp-press:0.97;
--tp-dur-slow:620ms;
--tp-stagger:80ms;
--tp-reveal:tp-pop;
--tp-reveal-dist:20px;
--tp-tex:none;
--tp-blur:none;
}
/* LINEN — Pastel wellness (restrained)
voice: Quiet, grown, sustainable. Speaks in short true sentences.
art: Natural-light film photography: linen, wood, plants, human hands. Grain welcome, saturation low. */
[data-theme="linen"]{
--tp-img-r:16px;
--tp-img-frame:1px solid oklch(0.88 0.012 95);
--tp-img-sh:0 6px 20px rgba(40,44,36,.08);
--tp-img-filter:saturate(0.9) sepia(0.06);
--tp-img-overlay-op:0.1;
--tp-img-blend:normal;
--tp-img-tilt:0deg;
--tp-img-ar:3 / 4;
--tp-bg:oklch(0.965 0.012 95);
--tp-canvas:oklch(0.965 0.012 95);
--tp-surf:#ffffff;
--tp-surf-2:oklch(0.94 0.035 calc(var(--tp-h) + 0));
--tp-ink:#1f231e;
--tp-mute:#6a6f65;
--tp-acc:oklch(0.66 0.11 calc(var(--tp-h) + 0));
--tp-acc-2:oklch(0.7 0.1 calc(var(--tp-h) + 60));
--tp-acc-ink:#ffffff;
--tp-line:oklch(0.88 0.012 95);
--tp-grad:linear-gradient(135deg, oklch(0.64 0.11 calc(var(--tp-h) + 0)), oklch(0.7 0.09 calc(var(--tp-h) + 50)));
--tp-r:16px;
--tp-r-sm:10px;
--tp-r-lg:20px;
--tp-r-btn:12px;
--tp-sh:0 6px 20px rgba(40,44,36,.08);
--tp-sh-sm:0 3px 10px rgba(40,44,36,.06);
--tp-bw:1px;
--tp-font-display:'Plus Jakarta Sans', system-ui;
--tp-font-body:'Plus Jakarta Sans', system-ui;
--tp-font-mono:'JetBrains Mono', monospace;
--tp-w-display:800;
--tp-track-display:-0.02em;
--tp-case-display:none;
--tp-hero:64px;
--tp-dur:240ms;
--tp-ease:cubic-bezier(.3,.9,.2,1);
--tp-press:0.98;
--tp-dur-slow:680ms;
--tp-stagger:90ms;
--tp-reveal:tp-up;
--tp-reveal-dist:20px;
--tp-tex:none;
--tp-blur:none;
}
/* RUNWAY — Editorial mono (loud)
voice: Fashion-issue declarative. One sentence, no hedging.
art: Full-bleed black-and-white editorial fashion photography. One enormous image per view; the accent appears only as a knockout block beside it. */
[data-theme="runway"]{
--tp-img-r:0px;
--tp-img-frame:1.5px solid #000000;
--tp-img-sh:none;
--tp-img-filter:grayscale(1) contrast(1.15);
--tp-img-overlay-op:0;
--tp-img-blend:normal;
--tp-img-tilt:0deg;
--tp-img-ar:3 / 4;
--tp-bg:#ffffff;
--tp-canvas:#ffffff;
--tp-surf:#ffffff;
--tp-surf-2:#f1f1f1;
--tp-ink:#000000;
--tp-mute:#6a6a6a;
--tp-acc:oklch(0.6 0.24 calc(var(--tp-h) + 0));
--tp-acc-2:#000000;
--tp-acc-ink:#ffffff;
--tp-line:#000000;
--tp-grad:linear-gradient(135deg, oklch(0.58 0.24 calc(var(--tp-h) + 0)), oklch(0.5 0.22 calc(var(--tp-h) + 20)));
--tp-r:0px;
--tp-r-sm:0px;
--tp-r-lg:0px;
--tp-r-btn:0px;
--tp-sh:none;
--tp-sh-sm:none;
--tp-bw:1.5px;
--tp-font-display:'DM Serif Display', Georgia, serif;
--tp-font-body:'Space Grotesk', system-ui;
--tp-font-mono:'JetBrains Mono', monospace;
--tp-w-display:400;
--tp-track-display:-0.035em;
--tp-case-display:none;
--tp-hero:92px;
--tp-dur:380ms;
--tp-ease:cubic-bezier(.22,1,.36,1);
--tp-press:0.99;
--tp-dur-slow:820ms;
--tp-stagger:110ms;
--tp-reveal:tp-rise;
--tp-reveal-dist:34px;
--tp-tex:none;
--tp-blur:none;
}
/* MARGIN — Editorial mono (restrained)
voice: Essayistic and calm. Treats the user as literate.
art: Archival photography, inset small with a mono caption beneath. Images illustrate the text, never lead it. */
[data-theme="margin"]{
--tp-img-r:2px;
--tp-img-frame:1px solid oklch(0.82 0.015 80);
--tp-img-sh:none;
--tp-img-filter:grayscale(0.85) sepia(0.1) contrast(1.05);
--tp-img-overlay-op:0;
--tp-img-blend:multiply;
--tp-img-tilt:0deg;
--tp-img-ar:3 / 2;
--tp-bg:oklch(0.975 0.012 80);
--tp-canvas:oklch(0.975 0.012 80);
--tp-surf:oklch(0.99 0.006 80);
--tp-surf-2:oklch(0.94 0.014 80);
--tp-ink:#1a1814;
--tp-mute:#736c60;
--tp-acc:oklch(0.6 0.12 calc(var(--tp-h) + 0));
--tp-acc-2:oklch(0.58 0.1 calc(var(--tp-h) + 200));
--tp-acc-ink:#ffffff;
--tp-line:oklch(0.82 0.015 80);
--tp-grad:linear-gradient(135deg, oklch(0.6 0.12 calc(var(--tp-h) + 0)), oklch(0.58 0.1 calc(var(--tp-h) + 190)));
--tp-r:2px;
--tp-r-sm:1px;
--tp-r-lg:3px;
--tp-r-btn:2px;
--tp-sh:none;
--tp-sh-sm:0 1px 0 oklch(0.86 0.015 80);
--tp-bw:1px;
--tp-font-display:'Instrument Serif', Georgia, serif;
--tp-font-body:'Space Grotesk', system-ui;
--tp-font-mono:'JetBrains Mono', monospace;
--tp-w-display:400;
--tp-track-display:-0.01em;
--tp-case-display:none;
--tp-hero:78px;
--tp-dur:300ms;
--tp-ease:cubic-bezier(.22,1,.36,1);
--tp-press:0.99;
--tp-dur-slow:760ms;
--tp-stagger:100ms;
--tp-reveal:tp-fade;
--tp-reveal-dist:14px;
--tp-tex:none;
--tp-blur:none;
}
/* ARCADE ROT — Retro pixel (loud)
voice: Insert-coin taunting. Very short strings, score-brained.
art: Pixel art and dithered sprites only. If a photo must appear, posterize it to eight colors and scale it with image-rendering: pixelated. */
[data-theme="arcade-rot"]{
--tp-img-r:0px;
--tp-img-frame:2px solid oklch(0.6 0.18 calc(var(--tp-h) + 0));
--tp-img-sh:5px 5px 0 oklch(0.5 0.18 calc(var(--tp-h) + 0));
--tp-img-filter:contrast(1.3) saturate(1.5);
--tp-img-overlay-op:0.45;
--tp-img-blend:hard-light;
--tp-img-tilt:0deg;
--tp-img-ar:4 / 3;
--tp-bg:#06090a;
--tp-canvas:#06090a;
--tp-surf:#0e1518;
--tp-surf-2:#162126;
--tp-ink:#e9fff4;
--tp-mute:oklch(0.72 0.14 calc(var(--tp-h) + 0));
--tp-acc:oklch(0.82 0.24 calc(var(--tp-h) + 0));
--tp-acc-2:oklch(0.7 0.22 calc(var(--tp-h) + 200));
--tp-acc-ink:#06090a;
--tp-line:oklch(0.6 0.18 calc(var(--tp-h) + 0));
--tp-grad:linear-gradient(135deg, oklch(0.82 0.24 calc(var(--tp-h) + 0)), oklch(0.7 0.22 calc(var(--tp-h) + 210)));
--tp-r:0px;
--tp-r-sm:0px;
--tp-r-lg:0px;
--tp-r-btn:0px;
--tp-sh:5px 5px 0 oklch(0.5 0.18 calc(var(--tp-h) + 0));
--tp-sh-sm:3px 3px 0 oklch(0.5 0.18 calc(var(--tp-h) + 0));
--tp-bw:2px;
--tp-font-display:'Press Start 2P', monospace;
--tp-font-body:'Space Grotesk', system-ui;
--tp-font-mono:'Press Start 2P', monospace;
--tp-w-display:400;
--tp-track-display:0em;
--tp-case-display:uppercase;
--tp-hero:40px;
--tp-dur:90ms;
--tp-ease:steps(3, end);
--tp-press:0.94;
--tp-dur-slow:260ms;
--tp-stagger:30ms;
--tp-reveal:tp-glitch;
--tp-reveal-dist:8px;
--tp-tex:repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
--tp-blur:none;
}
/* GAMEBOY GREEN — Retro pixel (restrained)
voice: Handheld manual voice. Flat, factual, oddly charming.
art: Four-shade dithered art, as if drawn on an LCD. No full-color imagery anywhere. */
[data-theme="gameboy-green"]{
--tp-img-r:2px;
--tp-img-frame:2px solid oklch(0.38 0.06 128);
--tp-img-sh:3px 3px 0 oklch(0.52 0.07 128);
--tp-img-filter:grayscale(1) contrast(1.45) sepia(0.45) hue-rotate(55deg) saturate(2);
--tp-img-overlay-op:0.3;
--tp-img-blend:multiply;
--tp-img-tilt:0deg;
--tp-img-ar:1 / 1;
--tp-bg:oklch(0.88 0.06 calc(var(--tp-h) + 0));
--tp-canvas:oklch(0.88 0.06 calc(var(--tp-h) + 0));
--tp-surf:oklch(0.92 0.05 calc(var(--tp-h) + 0));
--tp-surf-2:oklch(0.82 0.07 calc(var(--tp-h) + 0));
--tp-ink:oklch(0.28 0.06 128);
--tp-mute:oklch(0.46 0.05 128);
--tp-acc:oklch(0.62 0.12 calc(var(--tp-h) + 0));
--tp-acc-2:oklch(0.34 0.07 128);
--tp-acc-ink:oklch(0.94 0.05 calc(var(--tp-h) + 0));
--tp-line:oklch(0.38 0.06 128);
--tp-grad:linear-gradient(135deg, oklch(0.62 0.12 calc(var(--tp-h) + 0)), oklch(0.42 0.08 128));
--tp-r:2px;
--tp-r-sm:1px;
--tp-r-lg:4px;
--tp-r-btn:2px;
--tp-sh:3px 3px 0 oklch(0.52 0.07 128);
--tp-sh-sm:2px 2px 0 oklch(0.6 0.06 128);
--tp-bw:2px;
--tp-font-display:'VT323', monospace;
--tp-font-body:'VT323', monospace;
--tp-font-mono:'VT323', monospace;
--tp-w-display:400;
--tp-track-display:0.02em;
--tp-case-display:uppercase;
--tp-hero:84px;
--tp-dur:120ms;
--tp-ease:steps(4, end);
--tp-press:0.96;
--tp-dur-slow:320ms;
--tp-stagger:40ms;
--tp-reveal:tp-wipe;
--tp-reveal-dist:8px;
--tp-tex:repeating-linear-gradient(0deg, rgba(0,0,0,.055) 0 1px, transparent 1px 3px);
--tp-blur:none;
}
/* AURA BLOOM — Gradient mesh (loud)
voice: Dreamy and slightly mystical. Feelings over numbers.
art: Aura-photography portraits, chromatic bloom, blurred gradient light. Subject dissolving into color. */
[data-theme="aura-bloom"]{
--tp-img-r:26px;
--tp-img-frame:1px solid rgba(255,255,255,.3);
--tp-img-sh:0 18px 44px rgba(20,0,40,.32);
--tp-img-filter:saturate(1.25) brightness(1.05);
--tp-img-overlay-op:0.4;
--tp-img-blend:screen;
--tp-img-tilt:0deg;
--tp-img-ar:1 / 1;
--tp-bg:oklch(0.2 0.04 288);
--tp-canvas:radial-gradient(70% 60% at 10% 10%, oklch(0.72 0.2 calc(var(--tp-h) + 0)) 0%, transparent 55%), radial-gradient(70% 60% at 90% 20%, oklch(0.76 0.17 calc(var(--tp-h) + 80)) 0%, transparent 55%), radial-gradient(80% 70% at 50% 100%, oklch(0.68 0.19 calc(var(--tp-h) + 200)) 0%, transparent 60%), oklch(0.22 0.05 288);
--tp-surf:rgba(255,255,255,0.14);
--tp-surf-2:rgba(255,255,255,0.24);
--tp-ink:#ffffff;
--tp-mute:rgba(255,255,255,0.74);
--tp-acc:#ffffff;
--tp-acc-2:oklch(0.85 0.14 calc(var(--tp-h) + 60));
--tp-acc-ink:#211036;
--tp-line:rgba(255,255,255,0.3);
--tp-grad:linear-gradient(135deg, #ffffff, oklch(0.88 0.1 calc(var(--tp-h) + 60)));
--tp-r:26px;
--tp-r-sm:16px;
--tp-r-lg:34px;
--tp-r-btn:99px;
--tp-sh:0 18px 44px rgba(20,0,40,.32);
--tp-sh-sm:0 8px 22px rgba(20,0,40,.22);
--tp-bw:1px;
--tp-font-display:'Sora', system-ui;
--tp-font-body:'Outfit', system-ui;
--tp-font-mono:'JetBrains Mono', monospace;
--tp-w-display:700;
--tp-track-display:-0.03em;
--tp-case-display:none;
--tp-hero:82px;
--tp-dur:340ms;
--tp-ease:cubic-bezier(.32,.72,0,1);
--tp-press:0.97;
--tp-dur-slow:780ms;
--tp-stagger:90ms;
--tp-reveal:tp-blur-in;
--tp-reveal-dist:28px;
--tp-tex:none;
--tp-blur:blur(26px) saturate(1.3);
}
/* SOFT FOCUS — Gradient mesh (restrained)
voice: Gentle, optimistic, unhurried.
art: Soft gradient backdrops, out-of-focus foliage, gentle portraits. Everything slightly overexposed. */
[data-theme="soft-focus"]{
--tp-img-r:22px;
--tp-img-frame:1px solid rgba(20,32,56,.09);
--tp-img-sh:0 10px 30px rgba(24,40,70,.10);
--tp-img-filter:saturate(1.05) brightness(1.03);
--tp-img-overlay-op:0.2;
--tp-img-blend:normal;
--tp-img-tilt:0deg;
--tp-img-ar:16 / 10;
--tp-bg:oklch(0.97 0.01 218);
--tp-canvas:radial-gradient(80% 60% at 15% 0%, oklch(0.92 0.06 calc(var(--tp-h) + 0)) 0%, transparent 60%), radial-gradient(80% 60% at 90% 30%, oklch(0.93 0.05 calc(var(--tp-h) + 70)) 0%, transparent 60%), oklch(0.98 0.006 218);
--tp-surf:rgba(255,255,255,0.78);
--tp-surf-2:oklch(0.94 0.04 calc(var(--tp-h) + 0));
--tp-ink:oklch(0.24 0.02 230);
--tp-mute:oklch(0.54 0.02 230);
--tp-acc:oklch(0.68 0.14 calc(var(--tp-h) + 0));
--tp-acc-2:oklch(0.72 0.12 calc(var(--tp-h) + 70));
--tp-acc-ink:#ffffff;
--tp-line:rgba(20,32,56,0.09);
--tp-grad:linear-gradient(135deg, oklch(0.66 0.14 calc(var(--tp-h) + 0)), oklch(0.72 0.12 calc(var(--tp-h) + 70)));
--tp-r:22px;
--tp-r-sm:13px;
--tp-r-lg:28px;
--tp-r-btn:14px;
--tp-sh:0 10px 30px rgba(24,40,70,.10);
--tp-sh-sm:0 4px 14px rgba(24,40,70,.08);
--tp-bw:1px;
--tp-font-display:'Outfit', system-ui;
--tp-font-body:'Outfit', system-ui;
--tp-font-mono:'JetBrains Mono', monospace;
--tp-w-display:800;
--tp-track-display:-0.025em;
--tp-case-display:none;
--tp-hero:68px;
--tp-dur:280ms;
--tp-ease:cubic-bezier(.32,.72,0,1);
--tp-press:0.978;
--tp-dur-slow:720ms;
--tp-stagger:90ms;
--tp-reveal:tp-blur-in;
--tp-reveal-dist:24px;
--tp-tex:none;
--tp-blur:blur(20px);
}
/* ROOT ACCESS — Terminal (loud)
voice: System log. Commands, not encouragement.
art: Wireframes, ASCII, scanlines, satellite grabs. Any photograph gets duotoned to the phosphor hue and scanlined. */
[data-theme="root-access"]{
--tp-img-r:0px;
--tp-img-frame:1px solid oklch(0.48 0.14 calc(var(--tp-h) + 0));
--tp-img-sh:0 0 24px oklch(0.5 0.18 calc(var(--tp-h) + 0));
--tp-img-filter:grayscale(1) contrast(1.5) brightness(0.82) sepia(0.4) hue-rotate(75deg) saturate(3);
--tp-img-overlay-op:0.5;
--tp-img-blend:screen;
--tp-img-tilt:0deg;
--tp-img-ar:16 / 9;
--tp-bg:#000000;
--tp-canvas:#000000;
--tp-surf:#070b08;
--tp-surf-2:#0e1410;
--tp-ink:oklch(0.88 0.2 calc(var(--tp-h) + 0));
--tp-mute:oklch(0.62 0.14 calc(var(--tp-h) + 0));
--tp-acc:oklch(0.85 0.24 calc(var(--tp-h) + 0));
--tp-acc-2:oklch(0.8 0.2 calc(var(--tp-h) + 60));
--tp-acc-ink:#000000;
--tp-line:oklch(0.48 0.14 calc(var(--tp-h) + 0));
--tp-grad:linear-gradient(135deg, oklch(0.85 0.24 calc(var(--tp-h) + 0)), oklch(0.78 0.2 calc(var(--tp-h) + 60)));
--tp-r:0px;
--tp-r-sm:0px;
--tp-r-lg:0px;
--tp-r-btn:0px;
--tp-sh:0 0 24px oklch(0.5 0.18 calc(var(--tp-h) + 0));
--tp-sh-sm:0 0 12px oklch(0.45 0.16 calc(var(--tp-h) + 0));
--tp-bw:1px;
--tp-font-display:'JetBrains Mono', monospace;
--tp-font-body:'JetBrains Mono', monospace;
--tp-font-mono:'JetBrains Mono', monospace;
--tp-w-display:700;
--tp-track-display:0.02em;
--tp-case-display:uppercase;
--tp-hero:70px;
--tp-dur:100ms;
--tp-ease:linear;
--tp-press:0.985;
--tp-dur-slow:240ms;
--tp-stagger:25ms;
--tp-reveal:tp-glitch;
--tp-reveal-dist:6px;
--tp-tex:repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 3px);
--tp-blur:none;
}
/* PLAIN TEXT — Terminal (restrained)
voice: Documentation voice. Precise, no adjectives.
art: Diagrams and product screenshots, not photography. If an image is not informational, delete it. */
[data-theme="plain-text"]{
--tp-img-r:2px;
--tp-img-frame:1px solid #c9c9c4;
--tp-img-sh:none;
--tp-img-filter:grayscale(1) contrast(1.05);
--tp-img-overlay-op:0;
--tp-img-blend:normal;
--tp-img-tilt:0deg;
--tp-img-ar:3 / 2;
--tp-bg:#f7f7f5;
--tp-canvas:#f7f7f5;
--tp-surf:#ffffff;
--tp-surf-2:#ecebe8;
--tp-ink:#17171a;
--tp-mute:#6e6e73;
--tp-acc:oklch(0.56 0.15 calc(var(--tp-h) + 0));
--tp-acc-2:#17171a;
--tp-acc-ink:#ffffff;
--tp-line:#c9c9c4;
--tp-grad:linear-gradient(135deg, oklch(0.56 0.15 calc(var(--tp-h) + 0)), oklch(0.5 0.13 calc(var(--tp-h) + 30)));
--tp-r:2px;
--tp-r-sm:1px;
--tp-r-lg:3px;
--tp-r-btn:2px;
--tp-sh:none;
--tp-sh-sm:none;
--tp-bw:1px;
--tp-font-display:'JetBrains Mono', monospace;
--tp-font-body:'JetBrains Mono', monospace;
--tp-font-mono:'JetBrains Mono', monospace;
--tp-w-display:700;
--tp-track-display:-0.01em;
--tp-case-display:none;
--tp-hero:62px;
--tp-dur:150ms;
--tp-ease:cubic-bezier(.3,.9,.2,1);
--tp-press:0.99;
--tp-dur-slow:300ms;
--tp-stagger:50ms;
--tp-reveal:tp-fade;
--tp-reveal-dist:10px;
--tp-tex:none;
--tp-blur:none;
}
/* SQUISH — Clay 3D (loud)
voice: Playful and tactile. Everything feels pressable.
art: Claymation 3D renders with thick soft shadows. Objects look squeezable; photography only if it is equally tactile. */
[data-theme="squish"]{
--tp-img-r:28px;
--tp-img-frame:none;
--tp-img-sh:0 10px 0 oklch(0.78 0.1 calc(var(--tp-h) + 0)), 0 20px 34px rgba(80,50,20,.18);
--tp-img-filter:saturate(1.15) brightness(1.04);
--tp-img-overlay-op:0.2;
--tp-img-blend:normal;
--tp-img-tilt:-2deg;
--tp-img-ar:1 / 1;
--tp-bg:oklch(0.93 0.05 calc(var(--tp-h) + 0));
--tp-canvas:linear-gradient(175deg, oklch(0.94 0.05 calc(var(--tp-h) + 0)), oklch(0.9 0.06 calc(var(--tp-h) + 20)));
--tp-surf:#fffaf4;
--tp-surf-2:oklch(0.9 0.07 calc(var(--tp-h) + 0));
--tp-ink:#2c1c10;
--tp-mute:#7c6553;
--tp-acc:oklch(0.74 0.17 calc(var(--tp-h) + 0));
--tp-acc-2:oklch(0.76 0.15 calc(var(--tp-h) + 320));
--tp-acc-ink:#2c1c10;
--tp-line:oklch(0.78 0.09 calc(var(--tp-h) + 0));
--tp-grad:linear-gradient(135deg, oklch(0.78 0.16 calc(var(--tp-h) + 0)), oklch(0.78 0.14 calc(var(--tp-h) + 330)));
--tp-r:28px;
--tp-r-sm:18px;
--tp-r-lg:34px;
--tp-r-btn:99px;
--tp-sh:0 10px 0 oklch(0.78 0.1 calc(var(--tp-h) + 0)), 0 20px 34px rgba(80,50,20,.18);
--tp-sh-sm:0 5px 0 oklch(0.82 0.08 calc(var(--tp-h) + 0));
--tp-bw:0px;
--tp-font-display:'Baloo 2', system-ui;
--tp-font-body:'Outfit', system-ui;
--tp-font-mono:'JetBrains Mono', monospace;
--tp-w-display:800;
--tp-track-display:-0.01em;
--tp-case-display:none;
--tp-hero:76px;
--tp-dur:260ms;
--tp-ease:cubic-bezier(.34,1.6,.64,1);
--tp-press:0.945;
--tp-dur-slow:560ms;
--tp-stagger:70ms;
--tp-reveal:tp-pop;
--tp-reveal-dist:20px;
--tp-tex:none;
--tp-blur:none;
}
/* PUTTY — Clay 3D (restrained)
voice: Soft-spoken product voice. Helpful, never cute.
art: Matte 3D product renders, one soft light, neutral backdrop. Calm and unbranded. */
[data-theme="putty"]{
--tp-img-r:24px;
--tp-img-frame:none;
--tp-img-sh:0 8px 0 oklch(0.87 0.015 258), 0 16px 26px rgba(30,36,60,.10);
--tp-img-filter:saturate(0.98);
--tp-img-overlay-op:0.14;
--tp-img-blend:normal;
--tp-img-tilt:0deg;
--tp-img-ar:4 / 3;
--tp-bg:oklch(0.93 0.012 258);
--tp-canvas:oklch(0.93 0.012 258);
--tp-surf:oklch(0.97 0.008 258);
--tp-surf-2:oklch(0.89 0.015 258);
--tp-ink:#20232b;
--tp-mute:#6b6f7a;
--tp-acc:oklch(0.66 0.13 calc(var(--tp-h) + 0));
--tp-acc-2:oklch(0.7 0.11 calc(var(--tp-h) + 40));
--tp-acc-ink:#ffffff;
--tp-line:oklch(0.86 0.015 258);
--tp-grad:linear-gradient(135deg, oklch(0.64 0.13 calc(var(--tp-h) + 0)), oklch(0.7 0.11 calc(var(--tp-h) + 40)));
--tp-r:24px;
--tp-r-sm:15px;
--tp-r-lg:28px;
--tp-r-btn:16px;
--tp-sh:0 8px 0 oklch(0.87 0.015 258), 0 16px 26px rgba(30,36,60,.10);
--tp-sh-sm:0 4px 0 oklch(0.89 0.012 258);
--tp-bw:0px;
--tp-font-display:'Outfit', system-ui;
--tp-font-body:'Outfit', system-ui;
--tp-font-mono:'JetBrains Mono', monospace;
--tp-w-display:800;
--tp-track-display:-0.02em;
--tp-case-display:none;
--tp-hero:68px;
--tp-dur:240ms;
--tp-ease:cubic-bezier(.34,1.3,.64,1);
--tp-press:0.965;
--tp-dur-slow:600ms;
--tp-stagger:80ms;
--tp-reveal:tp-up;
--tp-reveal-dist:20px;
--tp-tex:none;
--tp-blur:none;
}
/* SCRAPBOOK — Sticker collage (loud)
voice: Handwritten diary. Messy, personal, in-jokes allowed.
art: Polaroids taped down at an angle, torn edges, doodles drawn over the photo. Every image is rotated a few degrees. */
[data-theme="scrapbook"]{
--tp-img-r:8px;
--tp-img-frame:2px solid #211c12;
--tp-img-sh:4px 5px 0 rgba(33,28,18,.2);
--tp-img-filter:sepia(0.16) contrast(1.05) saturate(1.1);
--tp-img-overlay-op:0.12;
--tp-img-blend:multiply;
--tp-img-tilt:-3deg;
--tp-img-ar:4 / 5;
--tp-bg:oklch(0.95 0.03 80);
--tp-canvas:radial-gradient(oklch(0.86 0.04 80) 1px, transparent 1px) 0 0 / 14px 14px, oklch(0.95 0.03 80);
--tp-surf:#fffdf5;
--tp-surf-2:oklch(0.9 0.09 calc(var(--tp-h) + 0));
--tp-ink:#211c12;
--tp-mute:#6f6552;
--tp-acc:oklch(0.84 0.18 calc(var(--tp-h) + 0));
--tp-acc-2:oklch(0.7 0.18 calc(var(--tp-h) + 330));
--tp-acc-ink:#211c12;
--tp-line:#211c12;
--tp-grad:linear-gradient(135deg, oklch(0.86 0.17 calc(var(--tp-h) + 0)), oklch(0.74 0.17 calc(var(--tp-h) + 340)));
--tp-r:8px;
--tp-r-sm:5px;
--tp-r-lg:12px;
--tp-r-btn:8px;
--tp-sh:4px 5px 0 rgba(33,28,18,.2);
--tp-sh-sm:2px 3px 0 rgba(33,28,18,.16);
--tp-bw:2px;
--tp-font-display:'Caveat', cursive;
--tp-font-body:'Space Grotesk', system-ui;
--tp-font-mono:'JetBrains Mono', monospace;
--tp-w-display:700;
--tp-track-display:0em;
--tp-case-display:none;
--tp-hero:96px;
--tp-dur:200ms;
--tp-ease:cubic-bezier(.34,1.5,.64,1);
--tp-press:0.96;
--tp-dur-slow:600ms;
--tp-stagger:90ms;
--tp-reveal:tp-tape;
--tp-reveal-dist:22px;
--tp-tex:none;
--tp-blur:none;
}
/* TAPE DECK — Sticker collage (restrained)
voice: Mixtape liner notes. Nostalgic but tidy.
art: Faded 90s film scans, xeroxed textures, handwritten tape labels. */
[data-theme="tape-deck"]{
--tp-img-r:6px;
--tp-img-frame:1.5px solid oklch(0.72 0.04 70);
--tp-img-sh:2px 3px 0 rgba(37,28,20,.18);
--tp-img-filter:sepia(0.2) saturate(0.9) contrast(1.04);
--tp-img-overlay-op:0.14;
--tp-img-blend:multiply;
--tp-img-tilt:-1.5deg;
--tp-img-ar:1 / 1;
--tp-bg:oklch(0.92 0.025 70);
--tp-canvas:oklch(0.92 0.025 70);
--tp-surf:oklch(0.97 0.015 70);
--tp-surf-2:oklch(0.87 0.03 70);
--tp-ink:#251c14;
--tp-mute:#6d5f50;
--tp-acc:oklch(0.66 0.13 calc(var(--tp-h) + 0));
--tp-acc-2:oklch(0.62 0.11 calc(var(--tp-h) + 160));
--tp-acc-ink:#ffffff;
--tp-line:oklch(0.72 0.04 70);
--tp-grad:linear-gradient(135deg, oklch(0.66 0.13 calc(var(--tp-h) + 0)), oklch(0.62 0.11 calc(var(--tp-h) + 160)));
--tp-r:6px;
--tp-r-sm:4px;
--tp-r-lg:8px;
--tp-r-btn:6px;
--tp-sh:2px 3px 0 rgba(37,28,20,.18);
--tp-sh-sm:1px 2px 0 rgba(37,28,20,.14);
--tp-bw:1.5px;
--tp-font-display:'Bricolage Grotesque', system-ui;
--tp-font-body:'Space Grotesk', system-ui;
--tp-font-mono:'JetBrains Mono', monospace;
--tp-w-display:700;
--tp-track-display:-0.01em;
--tp-case-display:none;
--tp-hero:64px;
--tp-dur:220ms;
--tp-ease:cubic-bezier(.3,.9,.2,1);
--tp-press:0.975;
--tp-dur-slow:520ms;
--tp-stagger:80ms;
--tp-reveal:tp-tape;
--tp-reveal-dist:18px;
--tp-tex:none;
--tp-blur:none;
}
/* SIGNAL — Swiss + loud accent (loud)
voice: Grid-locked and declarative. Numbers do the talking.
art: Documentary black-and-white photography locked to the grid. The accent is a knockout block next to the photo, never a tint on it. */
[data-theme="signal"]{
--tp-img-r:0px;
--tp-img-frame:1.5px solid #0d0d0d;
--tp-img-sh:none;
--tp-img-filter:grayscale(1) contrast(1.1);
--tp-img-overlay-op:0;
--tp-img-blend:normal;
--tp-img-tilt:0deg;
--tp-img-ar:3 / 2;
--tp-bg:#ffffff;
--tp-canvas:#ffffff;
--tp-surf:#ffffff;
--tp-surf-2:#f2f2f2;
--tp-ink:#0d0d0d;
--tp-mute:#666666;
--tp-acc:oklch(0.64 0.24 calc(var(--tp-h) + 0));
--tp-acc-2:#0d0d0d;
--tp-acc-ink:#ffffff;
--tp-line:#0d0d0d;
--tp-grad:linear-gradient(135deg, oklch(0.64 0.24 calc(var(--tp-h) + 0)), oklch(0.58 0.22 calc(var(--tp-h) + 20)));
--tp-r:0px;
--tp-r-sm:0px;
--tp-r-lg:0px;
--tp-r-btn:0px;
--tp-sh:none;
--tp-sh-sm:none;
--tp-bw:1.5px;
--tp-font-display:'Helvetica Neue', Helvetica, Arial, sans-serif;
--tp-font-body:'Helvetica Neue', Helvetica, Arial, sans-serif;
--tp-font-mono:'JetBrains Mono', monospace;
--tp-w-display:700;
--tp-track-display:-0.035em;
--tp-case-display:uppercase;
--tp-hero:84px;
--tp-dur:170ms;
--tp-ease:cubic-bezier(.2,.9,.2,1);
--tp-press:0.985;
--tp-dur-slow:400ms;
--tp-stagger:60ms;
--tp-reveal:tp-wipe;
--tp-reveal-dist:20px;
--tp-tex:none;
--tp-blur:none;
}
/* GRID — Swiss + loud accent (restrained)
voice: Neutral, legible, infinitely reskinnable. The safe default.
art: Neutral photography and clean UI screenshots. The safe default when an app has no strong visual thesis. */
[data-theme="grid"]{
--tp-img-r:4px;
--tp-img-frame:1px solid #d5d7da;
--tp-img-sh:0 1px 3px rgba(20,24,30,.10);
--tp-img-filter:none;
--tp-img-overlay-op:0.1;
--tp-img-blend:normal;
--tp-img-tilt:0deg;
--tp-img-ar:16 / 10;
--tp-bg:#f5f6f7;
--tp-canvas:#f5f6f7;
--tp-surf:#ffffff;
--tp-surf-2:#e9eaec;
--tp-ink:#1a1c1f;
--tp-mute:#6c7076;
--tp-acc:oklch(0.6 0.16 calc(var(--tp-h) + 0));
--tp-acc-2:#1a1c1f;
--tp-acc-ink:#ffffff;
--tp-line:#d5d7da;
--tp-grad:linear-gradient(135deg, oklch(0.6 0.16 calc(var(--tp-h) + 0)), oklch(0.54 0.14 calc(var(--tp-h) + 30)));
--tp-r:4px;
--tp-r-sm:3px;
--tp-r-lg:6px;
--tp-r-btn:4px;
--tp-sh:0 1px 3px rgba(20,24,30,.10);
--tp-sh-sm:0 1px 2px rgba(20,24,30,.08);
--tp-bw:1px;
--tp-font-display:'Helvetica Neue', Helvetica, Arial, sans-serif;
--tp-font-body:'Helvetica Neue', Helvetica, Arial, sans-serif;
--tp-font-mono:'JetBrains Mono', monospace;
--tp-w-display:700;
--tp-track-display:-0.02em;
--tp-case-display:none;
--tp-hero:60px;
--tp-dur:180ms;
--tp-ease:cubic-bezier(.3,.9,.2,1);
--tp-press:0.99;
--tp-dur-slow:440ms;
--tp-stagger:60ms;
--tp-reveal:tp-up;
--tp-reveal-dist:16px;
--tp-tex:none;
--tp-blur:none;
}