:root,
:root[data-theme="venus-default"] {
  color-scheme: light;

  /* Foundation */
  --ui-font-body: "Segoe UI", Arial, sans-serif;
  --ui-font-heading: "Segoe UI", Arial, sans-serif;

  --ui-radius-xs: 10px;
  --ui-radius-sm: 16px;
  --ui-radius-md: 22px;
  --ui-radius-lg: 28px;
  --ui-radius-xl: 32px;
  --ui-radius-pill: 999px;

  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;

  /* Core palette */
  --ui-color-bg-canvas: #e8eafc;
  --ui-color-bg-shell-top: rgba(255, 255, 255, 0.36);
  --ui-color-bg-shell-bottom: rgba(255, 255, 255, 0.12);
  --ui-color-surface: rgba(255, 255, 255, 0.92);
  --ui-color-surface-strong: #ffffff;
  --ui-color-surface-soft: rgba(241, 244, 255, 0.92);
  --ui-color-surface-hero-card: rgba(255, 255, 255, 0.16);
  --ui-color-text: #1a2242;
  --ui-color-text-strong: #192d68;
  --ui-color-text-muted: #61709f;
  --ui-color-border: rgba(48, 72, 145, 0.12);
  --ui-color-primary: #1f4dd9;
  --ui-color-primary-strong: #192d68;
  --ui-color-primary-bright: #356dff;
  --ui-color-accent: #ff8b2c;
  --ui-color-on-primary: #ffffff;
  --ui-asset-hero-wave: url("./assets/hero-wave.svg");

  /* App backgrounds */
  --ui-gradient-app-bg:
    radial-gradient(circle at top left, rgba(79, 109, 255, 0.3), transparent 32%),
    linear-gradient(180deg, #f3f4ff 0%, #dfe3fb 45%, #d8dcfb 100%);
  --ui-gradient-app-bg-mobile:
    radial-gradient(circle at top left, rgba(79, 109, 255, 0.18), transparent 28%),
    linear-gradient(180deg, #eef3ff 0%, #e6edff 100%);
  --ui-gradient-hero:
    linear-gradient(180deg, rgba(4, 15, 100, 0.12), rgba(4, 15, 100, 0.2)),
    var(--ui-asset-hero-wave) center/cover no-repeat,
    linear-gradient(160deg, #081377 0%, #1738cc 38%, #2d4ceb 58%, #2344dd 100%);

  /* Shadows */
  --ui-shadow-card: 0 22px 55px rgba(29, 44, 103, 0.14);
  --ui-shadow-button: 0 14px 24px rgba(31, 77, 217, 0.24);
  --ui-shadow-float: 0 18px 38px rgba(15, 26, 70, 0.26);

  /* Component tokens */
  --ui-card-bg: rgba(255, 255, 255, 0.9);
  --ui-card-border: 1px solid rgba(255, 255, 255, 0.84);
  --ui-card-shadow: var(--ui-shadow-card);
  --ui-input-bg: var(--ui-color-surface-soft);
  --ui-input-border: 1px solid var(--ui-color-border);
  --ui-button-primary-bg: linear-gradient(135deg, var(--ui-color-primary) 0%, var(--ui-color-primary-bright) 100%);
  --ui-button-primary-color: var(--ui-color-on-primary);
  --ui-button-secondary-bg: rgba(31, 77, 217, 0.08);
  --ui-button-secondary-color: var(--ui-color-primary);
  --ui-topbar-bg: rgba(243, 244, 255, 0.9);
  --ui-hero-text: #ffffff;
  --ui-mobile-nav-bg: rgba(17, 28, 74, 0.92);
  --ui-mobile-nav-text: rgba(255, 255, 255, 0.72);
  --ui-mobile-nav-active-bg: rgba(255, 255, 255, 0.12);
  --ui-mobile-nav-active-text: #ffffff;
  --ui-calendar-page-text: #2d3138;
  --ui-calendar-muted: #7c838c;
  --ui-calendar-accent: #1f6bff;
  --ui-calendar-soft-surface: #f7f8fb;
  --ui-calendar-handle: #c7c9ce;
  --ui-calendar-divider: #e5bf78;
}

:root[data-theme="venus-sunset"] {
  --ui-color-primary: #b54f2a;
  --ui-color-primary-strong: #6f2b16;
  --ui-color-primary-bright: #df7a4c;
  --ui-color-accent: #f2b544;
  --ui-asset-hero-wave: url("./assets/hero-wave-sunset.svg");
  --ui-gradient-app-bg:
    radial-gradient(circle at top left, rgba(255, 167, 114, 0.28), transparent 32%),
    linear-gradient(180deg, #fff7f1 0%, #ffe8dc 45%, #ffe1d1 100%);
  --ui-gradient-app-bg-mobile:
    radial-gradient(circle at top left, rgba(255, 180, 132, 0.24), transparent 28%),
    linear-gradient(180deg, #fff8f2 0%, #ffefe6 100%);
  --ui-gradient-hero:
    linear-gradient(180deg, rgba(112, 28, 8, 0.14), rgba(112, 28, 8, 0.24)),
    var(--ui-asset-hero-wave) center/cover no-repeat,
    linear-gradient(160deg, #6f2b16 0%, #a64523 40%, #df7a4c 100%);
}

:root[data-theme="venus-barbie"] {
  --ui-color-bg-canvas: #fff0f7;
  --ui-color-bg-shell-top: rgba(255, 255, 255, 0.5);
  --ui-color-bg-shell-bottom: rgba(255, 221, 239, 0.22);
  --ui-color-surface: rgba(255, 255, 255, 0.94);
  --ui-color-surface-soft: rgba(255, 236, 245, 0.92);
  --ui-color-text: #5c1d46;
  --ui-color-text-strong: #9a1164;
  --ui-color-text-muted: #9a5e82;
  --ui-color-border: rgba(182, 67, 132, 0.14);
  --ui-color-primary: #e93d8d;
  --ui-color-primary-strong: #b10f67;
  --ui-color-primary-bright: #ff74b5;
  --ui-color-accent: #ffb1d5;
  --ui-asset-hero-wave: url("./assets/hero-wave-barbie.svg");
  --ui-gradient-app-bg:
    radial-gradient(circle at top left, rgba(255, 126, 190, 0.26), transparent 30%),
    linear-gradient(180deg, #fff7fb 0%, #ffe6f2 46%, #ffd9ec 100%);
  --ui-gradient-app-bg-mobile:
    radial-gradient(circle at top left, rgba(255, 133, 198, 0.24), transparent 28%),
    linear-gradient(180deg, #fff8fc 0%, #ffeef7 100%);
  --ui-gradient-hero:
    linear-gradient(180deg, rgba(177, 15, 103, 0.14), rgba(177, 15, 103, 0.22)),
    var(--ui-asset-hero-wave) center/cover no-repeat,
    linear-gradient(160deg, #ff5ca8 0%, #ff7dbf 40%, #ff9bcf 68%, #ffc1de 100%);
  --ui-shadow-card: 0 22px 55px rgba(197, 74, 142, 0.16);
  --ui-shadow-button: 0 14px 24px rgba(233, 61, 141, 0.26);
  --ui-shadow-float: 0 18px 38px rgba(170, 58, 118, 0.24);
  --ui-button-secondary-bg: rgba(233, 61, 141, 0.1);
  --ui-topbar-bg: rgba(255, 244, 250, 0.92);
  --ui-mobile-nav-bg: rgba(118, 21, 74, 0.92);
  --ui-calendar-page-text: #6c244f;
  --ui-calendar-muted: #a0678b;
  --ui-calendar-accent: #e93d8d;
  --ui-calendar-soft-surface: #fff3f8;
  --ui-calendar-handle: #d59bbc;
  --ui-calendar-divider: #f2a8ca;
}