/* Muffinchen Design System – Tokens (aus claude.ai/design „Muffinchen Design System“, tokens/*.css). Saison per ; ohne Attribut = Standard-Farben. */ /* Farben */ :root{ --cream-50:#FFFBF3;--cream-100:#FEF6E6;--cream-200:#FEF0D6;--cream-300:#F9E2BC;--cream-400:#EFCD98; --pink-100:#FFE6EE;--pink-200:#FFD3DF;--pink-300:#FEB8CB;--pink-400:#FE9FB7;--pink-500:#F47C9D;--pink-600:#D9577D;--pink-700:#A8385B; --mint-100:#E3F7F2;--mint-200:#C6EEE5;--mint-300:#AFEADD;--mint-400:#99DACD;--mint-500:#6FC3B1;--mint-600:#3E9C8A;--mint-700:#276E61; --lav-100:#F4EAFD;--lav-200:#E7C5FB;--lav-300:#D9AEED;--lav-400:#C597EA;--lav-500:#A676DB;--lav-600:#8A5CC7;--lav-700:#633C99; --gold-100:#FFF6D1;--gold-200:#FDEC87;--gold-300:#F9D55E;--gold-400:#F2B43C;--gold-500:#DB9624;--gold-600:#B77414;--gold-700:#8A540C; --cherry-300:#FC8C96;--cherry-400:#FC5C6A;--cherry-500:#E8313F;--cherry-600:#B81F2C; --caramel-200:#F8D59E;--caramel-300:#F0BC6E;--caramel-400:#E9A64B;--caramel-500:#C9822D; --choc-900:#2F1002;--choc-800:#3B1A0A;--choc-700:#5A3218;--choc-600:#7A4E2E;--choc-500:#9C7352;--choc-400:#BFA083;--choc-300:#DCC7B0; --white:#FFFFFF; --bg-page:var(--cream-200);--bg-page-soft:var(--cream-100);--surface-card:var(--cream-50);--surface-raised:var(--white);--surface-sunken:var(--cream-300); --text-strong:var(--choc-800);--text-body:var(--choc-700);--text-muted:var(--choc-600);--text-subtle:var(--choc-500);--text-on-dark:var(--cream-50); --border-soft:var(--cream-400);--border-gold:var(--gold-400);--border-strong:var(--choc-700); --accent-primary:var(--pink-400);--accent-primary-deep:var(--pink-600); --accent-secondary:var(--mint-400);--accent-secondary-deep:var(--mint-600); --accent-tertiary:var(--lav-400);--accent-tertiary-deep:var(--lav-600); --accent-sparkle:var(--gold-400);--accent-sparkle-deep:var(--gold-600); --success:var(--mint-600);--success-bg:var(--mint-100); --warning:var(--gold-600);--warning-bg:var(--gold-100); --danger:var(--cherry-500);--danger-bg:var(--pink-100); --info:var(--lav-600);--info-bg:var(--lav-100); --focus-ring:var(--lav-500); --link:var(--pink-700);--link-hover:var(--cherry-600); --hero-bg:var(--cream-200);--hero-title:var(--choc-800);--hero-text:var(--choc-700); } /* Typografie */ :root{ --font-display:"Fredoka","Nunito",ui-rounded,system-ui,sans-serif; --font-body:"Nunito",ui-rounded,system-ui,sans-serif; --font-hand:"Fredoka",ui-rounded,sans-serif; --fs-hero:72px;--fs-h1:52px;--fs-h2:38px;--fs-h3:28px;--fs-h4:22px; --fs-lg:20px;--fs-body:17px;--fs-sm:15px;--fs-xs:13px; --lh-tight:1.05;--lh-heading:1.15;--lh-body:1.6; --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-black:800; --ls-display:-0.01em;--ls-label:0.04em; --text-hero:var(--fw-bold) var(--fs-hero)/var(--lh-tight) var(--font-display); --text-h1:var(--fw-bold) var(--fs-h1)/var(--lh-heading) var(--font-display); --text-h2:var(--fw-bold) var(--fs-h2)/var(--lh-heading) var(--font-display); --text-h3:var(--fw-semibold) var(--fs-h3)/var(--lh-heading) var(--font-display); --text-h4:var(--fw-semibold) var(--fs-h4)/1.25 var(--font-display); --text-lead:var(--fw-medium) var(--fs-lg)/1.5 var(--font-body); --text-body-default:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body); --text-small:var(--fw-regular) var(--fs-sm)/1.5 var(--font-body); --text-label:var(--fw-bold) var(--fs-xs)/1.2 var(--font-body); } /* Abstände, Radien, Schatten, Bewegung */ :root{ --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px; --container-max:1200px;--gutter:24px; --radius-xs:8px;--radius-sm:12px;--radius-md:18px;--radius-lg:26px;--radius-xl:36px;--radius-blob:48px;--radius-pill:999px; --stroke-gold:3px solid var(--gold-400); --stroke-soft:2px solid var(--cream-400); --shadow-soft:0 6px 18px rgba(122,78,46,.12); --shadow-float:0 14px 34px rgba(122,78,46,.18),0 3px 8px rgba(122,78,46,.10); --shadow-pop:0 22px 50px rgba(122,78,46,.22),0 6px 14px rgba(122,78,46,.12); --gloss-inset:inset 0 3px 0 rgba(255,255,255,.65),inset 0 -4px 0 rgba(0,0,0,.08); --lip-pink:0 5px 0 var(--pink-600);--lip-mint:0 5px 0 var(--mint-600);--lip-lav:0 5px 0 var(--lav-600);--lip-gold:0 5px 0 var(--gold-600);--lip-cream:0 5px 0 var(--cream-400); --candy-pink:linear-gradient(180deg,var(--pink-300) 0%,var(--pink-400) 55%,var(--pink-500) 100%); --candy-mint:linear-gradient(180deg,var(--mint-300) 0%,var(--mint-400) 55%,var(--mint-500) 100%); --candy-lav:linear-gradient(180deg,var(--lav-200) 0%,var(--lav-400) 60%,var(--lav-500) 100%); --candy-gold:linear-gradient(180deg,var(--gold-200) 0%,var(--gold-300) 45%,var(--gold-400) 100%); --glow-magic:radial-gradient(60% 60% at 50% 40%,rgba(255,255,255,.9) 0%,rgba(254,240,214,0) 70%); --bg-sparkle:radial-gradient(circle at 12% 18%,rgba(242,180,60,.35) 0 3px,transparent 4px),radial-gradient(circle at 78% 12%,rgba(254,159,183,.45) 0 4px,transparent 5px),radial-gradient(circle at 88% 70%,rgba(197,151,234,.4) 0 3px,transparent 4px),radial-gradient(circle at 30% 80%,rgba(153,218,205,.5) 0 4px,transparent 5px),radial-gradient(circle at 55% 45%,rgba(242,180,60,.25) 0 2px,transparent 3px); --ease-bounce:cubic-bezier(.34,1.56,.64,1);--ease-soft:cubic-bezier(.25,.8,.3,1); --dur-fast:120ms;--dur-base:220ms;--dur-slow:420ms; } /* Saison-Themes */ [data-theme="halloween"]{ --cream-50:#FFF8F0;--cream-100:#FFF0E0;--cream-200:#FDE6CC;--cream-300:#F6D3AE;--cream-400:#E9BC8C; --pink-100:#FFEBD9;--pink-200:#FFD6B0;--pink-300:#FFBC80;--pink-400:#FFA24F;--pink-500:#F58A2E;--pink-600:#D46A12;--pink-700:#9E4A08; --mint-100:#EEF8DC;--mint-200:#DCF1B8;--mint-300:#C6E88F;--mint-400:#ADDB67;--mint-500:#8CC443;--mint-600:#679C26;--mint-700:#466E15; --lav-100:#EFE6FA;--lav-200:#DCC8F3;--lav-300:#C4A6EA;--lav-400:#A882DC;--lav-500:#8A5FC9;--lav-600:#6B42A8;--lav-700:#4B2A7D; --choc-900:#1F1029;--choc-800:#2E1A3A;--choc-700:#4A2E58;--choc-600:#6A4C78;--choc-500:#8C7098;--choc-400:#B39CBC;--choc-300:#D6C8DA; } [data-theme="weihnachten"]{ --cream-50:#FFFDF9;--cream-100:#FDF8F1;--cream-200:#FAF1E6;--cream-300:#F1E2CF;--cream-400:#E3CCB0; --pink-100:#FFE5E5;--pink-200:#FFCACA;--pink-300:#FFA8A8;--pink-400:#FF8585;--pink-500:#F0605F;--pink-600:#CC3B3E;--pink-700:#9A2428; --mint-100:#E1F3EA;--mint-200:#C0E6D2;--mint-300:#9DD8B9;--mint-400:#7CC8A0;--mint-500:#56B083;--mint-600:#358A62;--mint-700:#1F6145; --lav-100:#E8F2FC;--lav-200:#CFE3F7;--lav-300:#B2D1F1;--lav-400:#92BCE8;--lav-500:#6E9FD6;--lav-600:#4C7DB8;--lav-700:#325A8A; } [data-theme]{ --bg-page:var(--cream-200);--bg-page-soft:var(--cream-100);--surface-card:var(--cream-50);--surface-raised:var(--white);--surface-sunken:var(--cream-300); --text-strong:var(--choc-800);--text-body:var(--choc-700);--text-muted:var(--choc-600);--text-subtle:var(--choc-500);--text-on-dark:var(--cream-50); --border-soft:var(--cream-400);--border-gold:var(--gold-400);--border-strong:var(--choc-700); --accent-primary:var(--pink-400);--accent-primary-deep:var(--pink-600); --accent-secondary:var(--mint-400);--accent-secondary-deep:var(--mint-600); --accent-tertiary:var(--lav-400);--accent-tertiary-deep:var(--lav-600); --accent-sparkle:var(--gold-400);--accent-sparkle-deep:var(--gold-600); --success:var(--mint-600);--success-bg:var(--mint-100); --warning:var(--gold-600);--warning-bg:var(--gold-100); --danger:var(--cherry-500);--danger-bg:var(--pink-100); --info:var(--lav-600);--info-bg:var(--lav-100); --focus-ring:var(--lav-500); --link:var(--pink-700);--link-hover:var(--cherry-600); --candy-pink:linear-gradient(180deg,var(--pink-300) 0%,var(--pink-400) 55%,var(--pink-500) 100%); --candy-mint:linear-gradient(180deg,var(--mint-300) 0%,var(--mint-400) 55%,var(--mint-500) 100%); --candy-lav:linear-gradient(180deg,var(--lav-200) 0%,var(--lav-400) 60%,var(--lav-500) 100%); --candy-gold:linear-gradient(180deg,var(--gold-200) 0%,var(--gold-300) 45%,var(--gold-400) 100%); --lip-pink:0 5px 0 var(--pink-600);--lip-mint:0 5px 0 var(--mint-600);--lip-lav:0 5px 0 var(--lav-600);--lip-gold:0 5px 0 var(--gold-600);--lip-cream:0 5px 0 var(--cream-400); --stroke-gold:3px solid var(--gold-400);--stroke-soft:2px solid var(--cream-400); } [data-theme="halloween"]{ --bg-sparkle:radial-gradient(circle at 12% 18%,rgba(242,180,60,.4) 0 3px,transparent 4px),radial-gradient(circle at 78% 12%,rgba(245,138,46,.45) 0 4px,transparent 5px),radial-gradient(circle at 88% 70%,rgba(138,95,201,.45) 0 3px,transparent 4px),radial-gradient(circle at 30% 80%,rgba(140,196,67,.45) 0 4px,transparent 5px),radial-gradient(circle at 55% 45%,rgba(107,66,168,.3) 0 2px,transparent 3px); --hero-bg:radial-gradient(60% 70% at 80% 30%,rgba(255,188,128,.35) 0%,transparent 60%),linear-gradient(180deg,#2E1A3A 0%,#4B2A7D 70%,#6B42A8 100%); --hero-title:#FFF0E0;--hero-text:#EFE6FA; } [data-theme="weihnachten"]{ --bg-sparkle:radial-gradient(circle at 12% 18%,rgba(242,180,60,.4) 0 3px,transparent 4px),radial-gradient(circle at 78% 12%,rgba(240,96,95,.4) 0 4px,transparent 5px),radial-gradient(circle at 88% 70%,rgba(110,159,214,.45) 0 3px,transparent 4px),radial-gradient(circle at 30% 80%,rgba(86,176,131,.45) 0 4px,transparent 5px),radial-gradient(circle at 55% 45%,rgba(242,180,60,.3) 0 2px,transparent 3px); --hero-bg:radial-gradient(60% 70% at 80% 30%,rgba(255,246,209,.35) 0%,transparent 60%),linear-gradient(180deg,#1E3A5F 0%,#325A8A 65%,#4C7DB8 100%); --hero-title:#FFFDF9;--hero-text:#E8F2FC; }