:root {
  color-scheme: light;
  --color-ink:#44343d;
  --color-muted:#796973;
  --color-primary:#c8577d;
  --color-primary-deep:#a94268;
  --color-primary-soft:#f7dce6;
  --color-surface:rgba(255,250,252,.78);
  --color-surface-strong:rgba(255,255,255,.94);
  --color-line:rgba(105,67,83,.12);
  --color-warm:#fff1dc;
  --gradient-action:linear-gradient(135deg,#d96f94,#b94d75);
  --gradient-home:linear-gradient(155deg,#ffe4ce 0%,#f8d8e8 48%,#dcd8f4 100%);
  --gradient-support:linear-gradient(155deg,#f9ddcf 0%,#ead8ef 56%,#d8d6f3 100%);
  --gradient-dates:linear-gradient(155deg,#f9e7cc 0%,#e9dbd1 52%,#d5e5e5 100%);
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;
  --radius-sm:12px;--radius-md:18px;--radius-lg:26px;--radius-pill:999px;
  --shadow-soft:0 14px 42px rgba(82,49,65,.11);
  --shadow-tray:0 14px 40px rgba(70,39,54,.18);
  --blur:18px;
  --motion-fast:160ms;--motion-normal:220ms;--motion-slow:7s;
  --ease:cubic-bezier(.22,.8,.26,1);
  --z-background:0;--z-decoration:0;--z-content:1;--z-tray:20;--z-modal:50;
  --safe-top:max(16px,env(safe-area-inset-top));
  --safe-bottom:max(12px,env(safe-area-inset-bottom));
  --tray-height:72px;
  font-family:ui-rounded,"Segoe UI",system-ui,-apple-system,sans-serif;
}

:root {
  --font-body: "Nunito", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: "Playfair Display", Georgia, serif;
  --color-ink: #3f2f37;
  --color-muted: #5f4b55;
  --color-primary: #b64c73;
  --color-primary-deep: #913456;
  --color-surface: rgba(255, 250, 252, .9);
  --color-surface-strong: rgba(255, 255, 255, .97);
  --color-card: rgba(255, 252, 249, .88);
  --color-card-strong: rgba(255, 246, 249, .94);
  --color-line: rgba(87, 48, 64, .2);
  --title-surface: rgba(255, 248, 250, .88);
  --nav-surface: rgba(255, 250, 252, .9);
  --nav-active-bg: rgba(255, 255, 255, .94);
  --nav-active-text: #913456;
  --button-primary-bg: #ad456d;
  --button-primary-hover: #98385e;
  --button-primary-active: #842f52;
  --button-primary-text: #ffffff;
  --button-primary-border: #8f3156;
  --button-primary-shadow: 0 9px 22px rgba(145, 52, 86, .25);
  --button-secondary-bg: rgba(255, 255, 255, .9);
  --button-secondary-hover: #fff5f8;
  --button-secondary-active: #f8e4eb;
  --button-secondary-text: #4b3540;
  --button-secondary-border: rgba(100, 57, 75, .3);
  --focus-ring: rgba(145, 52, 86, .48);
  --heading-shadow: 0 1px 1px rgba(255, 255, 255, .45);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

:root[data-background-theme="fashion"] {
  --color-ink: #f6f2f4;
  --color-muted: #d3c8ce;
  --color-primary: #e3ccd7;
  --color-primary-deep: #f2dce6;
  --color-surface: rgba(18, 18, 22, .92);
  --color-surface-strong: rgba(24, 24, 29, .97);
  --color-card: rgba(24, 24, 29, .91);
  --color-card-strong: rgba(31, 29, 34, .96);
  --color-line: rgba(255, 255, 255, .22);
  --title-surface: rgba(13, 13, 16, .88);
  --nav-surface: rgba(18, 18, 22, .94);
  --nav-active-bg: rgba(245, 237, 241, .96);
  --nav-active-text: #251b20;
  --button-primary-bg: #eee4e9;
  --button-primary-hover: #ffffff;
  --button-primary-active: #d9c9d1;
  --button-primary-text: #251b20;
  --button-primary-border: #ffffff;
  --button-primary-shadow: 0 10px 26px rgba(0, 0, 0, .34);
  --button-secondary-bg: rgba(38, 37, 43, .96);
  --button-secondary-hover: #35333a;
  --button-secondary-active: #1d1c21;
  --button-secondary-text: #f7f3f5;
  --button-secondary-border: rgba(255, 255, 255, .34);
  --focus-ring: rgba(255, 255, 255, .7);
  --heading-shadow: 0 2px 7px rgba(0, 0, 0, .72);
}

:root[data-background-theme="froggy"] {
  --font-heading: "Fredoka", "Nunito", sans-serif;
  --color-ink: #26362b;
  --color-muted: #486050;
  --color-primary: #467758;
  --color-primary-deep: #315c42;
  --color-surface: rgba(250, 248, 226, .92);
  --color-surface-strong: rgba(255, 253, 236, .97);
  --color-card: rgba(250, 248, 226, .9);
  --color-card-strong: rgba(255, 251, 225, .95);
  --color-line: rgba(41, 87, 58, .23);
  --title-surface: rgba(255, 249, 224, .88);
  --nav-surface: rgba(249, 248, 228, .93);
  --nav-active-bg: #fdf7cf;
  --nav-active-text: #315c42;
  --button-primary-bg: #3f7552;
  --button-primary-hover: #346746;
  --button-primary-active: #29563a;
  --button-primary-text: #ffffff;
  --button-primary-border: #28563a;
  --button-primary-shadow: 0 9px 22px rgba(38, 91, 57, .27);
  --button-secondary-bg: rgba(255, 253, 235, .94);
  --button-secondary-hover: #fff9d9;
  --button-secondary-active: #f2ebc7;
  --button-secondary-text: #294333;
  --button-secondary-border: rgba(48, 92, 62, .34);
  --focus-ring: rgba(46, 105, 67, .5);
  --heading-shadow: 0 1px 1px rgba(255, 255, 255, .65);
}

:root[data-background-theme="lavender"] {
  --color-ink: #342c4c;
  --color-muted: #5e5577;
  --color-primary: #7555a4;
  --color-primary-deep: #5d3c8c;
  --color-surface: rgba(249, 246, 255, .92);
  --color-surface-strong: rgba(255, 253, 255, .97);
  --color-card: rgba(249, 246, 255, .9);
  --color-card-strong: rgba(245, 238, 255, .95);
  --color-line: rgba(83, 61, 125, .22);
  --title-surface: rgba(249, 245, 255, .88);
  --nav-surface: rgba(249, 246, 255, .93);
  --nav-active-bg: #efe5ff;
  --nav-active-text: #5d3c8c;
  --button-primary-bg: #6d4c9b;
  --button-primary-hover: #5e3f8b;
  --button-primary-active: #4e3376;
  --button-primary-text: #ffffff;
  --button-primary-border: #4f3477;
  --button-primary-shadow: 0 9px 22px rgba(85, 57, 130, .26);
  --button-secondary-bg: rgba(255, 253, 255, .94);
  --button-secondary-hover: #f4edff;
  --button-secondary-active: #e9ddf8;
  --button-secondary-text: #3f3158;
  --button-secondary-border: rgba(83, 61, 125, .32);
  --focus-ring: rgba(93, 60, 140, .5);
  --heading-shadow: 0 1px 1px rgba(255, 255, 255, .65);
}

:root[data-background-theme="neon"] {
  --font-heading: "Unbounded", "Nunito", sans-serif;
  --color-ink: #f5f4ff;
  --color-muted: #cbc9e9;
  --color-primary: #74dbe2;
  --color-primary-deep: #8beaf0;
  --color-surface: rgba(7, 11, 35, .92);
  --color-surface-strong: rgba(10, 14, 42, .97);
  --color-card: rgba(8, 12, 38, .91);
  --color-card-strong: rgba(13, 16, 48, .96);
  --color-line: rgba(116, 219, 226, .28);
  --title-surface: rgba(5, 8, 30, .9);
  --nav-surface: rgba(7, 10, 32, .94);
  --nav-active-bg: rgba(25, 45, 74, .98);
  --nav-active-text: #a9f7fb;
  --button-primary-bg: #6750bf;
  --button-primary-hover: #7661cf;
  --button-primary-active: #5440a5;
  --button-primary-text: #ffffff;
  --button-primary-border: #8c7be1;
  --button-primary-shadow: 0 9px 24px rgba(87, 72, 183, .34);
  --button-secondary-bg: rgba(16, 24, 57, .97);
  --button-secondary-hover: #1d2c62;
  --button-secondary-active: #10183b;
  --button-secondary-text: #f5f4ff;
  --button-secondary-border: rgba(116, 219, 226, .48);
  --focus-ring: rgba(116, 219, 226, .68);
  --heading-shadow: 0 2px 8px rgba(0, 0, 0, .82);
}