/* Habit Garden landing colour presets: exported by web/landing/tools/export_themes.py from design/color-themes.json
 * (sha256 1465408aa42236cb) and design/theme.json (sha256 d8f0176f378e7b3c) through the reference derivation
 * design/color-themes/tools/ct_derive.py (sha256 b0affa159b9b1698); values equal design/color-themes/derived-tokens.json.
 * Night re-scopes every dark-scheme rule of web/landing/public/style.css (sha256 8e6d27b66b2bbece) and the dark block of
 * tokens.css (sha256 f902c3a89823946f). Applied by data-theme-preset on <html> (no attribute = Auto = Garden).
 * Do not edit by hand; re-run the tool. */

/* Garden (Auto): the page as it is, plus the one token the contract adds (accentSoft = leafSoft) */
:root {
  --c-accent-soft: #E3EFDB;
}
@media (prefers-color-scheme: dark) {
  :root {
    --c-accent-soft: #22352A;
  }
}
/* presets that follow the device: paper and ink per mode, everything else derived */
:root[data-theme-preset="ocean"] {
  --c-background: #E5F6F6;
  --c-surface: #F4FEFE;
  --c-surface-raised: #FFFFFF;
  --c-surface-sunk: #D4EDED;
  --c-border: #C6E1E0;
  --c-accent: #006B70;
  --c-accent-soft: #D7F1F2;
  --c-on-accent: #FFFFFF;
  --c-glass-fill: #FFFFFFA3;
  --c-glass-stroke: #FFFFFFCC;
  --c-glass-shade: #1F2E261A;
  --c-glass-fallback: #EDFAF9;
  --c-scrim: #1F2E2666;
  --c-focus: #1F2E26;
}
:root[data-theme-preset="sky"] {
  --c-background: #EAF3FC;
  --c-surface: #F9FCFF;
  --c-surface-raised: #FFFFFF;
  --c-surface-sunk: #DCE9F6;
  --c-border: #CEDCEA;
  --c-accent: #2F59AB;
  --c-accent-soft: #DEECFF;
  --c-on-accent: #FFFFFF;
  --c-glass-fill: #FFFFFFA3;
  --c-glass-stroke: #FFFFFFCC;
  --c-glass-shade: #1F2E261A;
  --c-glass-fallback: #F1F8FE;
  --c-scrim: #1F2E2666;
  --c-focus: #1F2E26;
}
:root[data-theme-preset="lavender"] {
  --c-background: #F4EEFC;
  --c-surface: #FCFAFF;
  --c-surface-raised: #FFFFFF;
  --c-surface-sunk: #EBE2F7;
  --c-border: #DED5EB;
  --c-accent: #6742A2;
  --c-accent-soft: #EDE5FF;
  --c-on-accent: #FFFFFF;
  --c-glass-fill: #FFFFFFA3;
  --c-glass-stroke: #FFFFFFCC;
  --c-glass-shade: #1F2E261A;
  --c-glass-fallback: #F8F4FF;
  --c-scrim: #1F2E2666;
  --c-focus: #1B76A3;
}
:root[data-theme-preset="berry"] {
  --c-background: #FCECF3;
  --c-surface: #FFF9FC;
  --c-surface-raised: #FFFFFF;
  --c-surface-sunk: #F6DFEA;
  --c-border: #EAD2DD;
  --c-accent: #9A2C7E;
  --c-accent-soft: #FFDFF1;
  --c-on-accent: #FFFFFF;
  --c-glass-fill: #FFFFFFA3;
  --c-glass-stroke: #FFFFFFCC;
  --c-glass-shade: #1F2E261A;
  --c-glass-fallback: #FEF2F8;
  --c-scrim: #1F2E2666;
  --c-focus: #1B76A3;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme-preset="ocean"] {
    --c-background: #0A1D21;
    --c-surface: #11292F;
    --c-surface-raised: #18333A;
    --c-surface-sunk: #09181B;
    --c-border: #23474D;
    --c-accent: #57CEBD;
    --c-accent-soft: #163537;
    --c-on-accent: #002622;
    --c-glass-fill: #0F262BA8;
    --c-glass-stroke: #FFFFFF33;
    --c-glass-shade: #00000040;
    --c-glass-fallback: #163036;
    --c-scrim: #00000080;
    --c-focus: #72C8EE;
  }
  :root[data-theme-preset="sky"] {
    --c-background: #111A25;
    --c-surface: #1B2533;
    --c-surface-raised: #222F3F;
    --c-surface-sunk: #0E151E;
    --c-border: #2F4256;
    --c-accent: #73A3FC;
    --c-accent-soft: #1F2F46;
    --c-on-accent: #121E3B;
    --c-glass-fill: #182330A8;
    --c-glass-stroke: #FFFFFF33;
    --c-glass-shade: #00000040;
    --c-glass-fallback: #202C3C;
    --c-scrim: #00000080;
    --c-focus: #F1EEE4;
  }
  :root[data-theme-preset="lavender"] {
    --c-background: #1C1627;
    --c-surface: #282035;
    --c-surface-raised: #322942;
    --c-surface-sunk: #171220;
    --c-border: #433A5A;
    --c-accent: #C8AEFA;
    --c-accent-soft: #322B3F;
    --c-on-accent: #241A31;
    --c-glass-fill: #251E32A8;
    --c-glass-stroke: #FFFFFF33;
    --c-glass-shade: #00000040;
    --c-glass-fallback: #2F263E;
    --c-scrim: #00000080;
    --c-focus: #72C8EE;
  }
  :root[data-theme-preset="berry"] {
    --c-background: #25131C;
    --c-surface: #341C27;
    --c-surface-raised: #3F2531;
    --c-surface-sunk: #1E1017;
    --c-border: #553446;
    --c-accent: #FDBADF;
    --c-accent-soft: #3B2932;
    --c-on-accent: #2D1823;
    --c-glass-fill: #301A25A8;
    --c-glass-stroke: #FFFFFF33;
    --c-glass-shade: #00000040;
    --c-glass-fallback: #3C222F;
    --c-scrim: #00000080;
    --c-focus: #72C8EE;
  }
}
/* Night: always dark, whatever the device says (the whole dark set) */
:root[data-theme-preset="night"] {
  color-scheme: dark;
  --c-background: #11142E;
  --c-surface: #1C1E3F;
  --c-surface-raised: #24274D;
  --c-surface-sunk: #0E1025;
  --c-text: #F1EEE4;
  --c-muted: #A9B7AB;
  --c-border: #2F3969;
  --c-accent: #96DDB6;
  --c-on-accent: #0D251A;
  --c-danger: #FF9C8A;
  --c-leaf: #94CF84;
  --c-leaf-soft: #22352A;
  --c-water: #72C8EE;
  --c-on-water: #082A3B;
  --c-water-soft: #17323F;
  --c-dew: #8FD6F2;
  --c-honey: #F2C35B;
  --c-honey-ink: #F6D48A;
  --c-honey-soft: #3A2F17;
  --c-terracotta: #E7A67C;
  --c-soil: #8C6A52;
  --c-glass-fill: #181C3BA8;
  --c-glass-stroke: #FFFFFF33;
  --c-glass-shade: #00000040;
  --c-glass-fallback: #202549;
  --c-scrim: #00000080;
  --c-focus: #72C8EE;
  --c-accent-soft: #1D2F39;
  --g-water-base: #5BBCD0;
  --g-water-tint: #16333B;
  --g-water-ink: #BFE9F2;
  --g-water-deep: #3A93A8;
  --g-move-base: #F0A276;
  --g-move-tint: #3B2618;
  --g-move-ink: #FFD9C2;
  --g-move-deep: #C8733D;
  --g-learn-base: #A48BE0;
  --g-learn-tint: #2A2345;
  --g-learn-ink: #DED4FF;
  --g-learn-deep: #7C62C4;
  --g-balance-base: #62C08F;
  --g-balance-tint: #173427;
  --g-balance-ink: #C4EDD6;
  --g-balance-deep: #3E9A6B;
  --g-rest-base: #9BB0D8;
  --g-rest-tint: #1F2A3F;
  --g-rest-ink: #D4DEF3;
  --g-rest-deep: #6F86B6;
  --g-care-base: #E0BE55;
  --g-care-tint: #353015;
  --g-care-ink: #F4E3A6;
  --g-care-deep: #B8962B;
  --g-heart-base: #EE97B1;
  --g-heart-tint: #3B1E29;
  --g-heart-ink: #FFD1DF;
  --g-heart-deep: #C9587F;
  --m-lavender-base: #9C8BE6;
  --m-lavender-tint: #2A2446;
  --m-lavender-ink: #DCD3FF;
  --m-lavender-deep: #6F5CC9;
  --m-mint-base: #6CC2A6;
  --m-mint-tint: #1B3530;
  --m-mint-ink: #BFEBDC;
  --m-mint-deep: #3E9C7D;
  --m-peach-base: #E9A07B;
  --m-peach-tint: #3A2419;
  --m-peach-ink: #FFD6C2;
  --m-peach-deep: #C8744C;
  --m-sky-base: #74B7E2;
  --m-sky-tint: #172F3F;
  --m-sky-ink: #C7E6FA;
  --m-sky-deep: #3F8CC0;
  --m-sage-base: #8BA988;
  --m-sage-tint: #223127;
  --m-sage-ink: #D2E3CF;
  --m-sage-deep: #5E845B;
  --m-sand-base: #C4AD85;
  --m-sand-tint: #352C1F;
  --m-sand-ink: #EADCC3;
  --m-sand-deep: #977A4C;
  --m-slate-base: #8796A6;
  --m-slate-tint: #232C36;
  --m-slate-ink: #D3DCE6;
  --m-slate-deep: #566779;
}
/* Night: every dark-scheme rule of style.css (night hero, scenes, who-for), re-scoped */
:root[data-theme-preset="night"] { --glass-hi: rgb(255 255 255 / 16%); --glass-edge: rgb(255 255 255 / 12%); --glass-lo: rgb(0 0 0 / 20%); --glass-rim: rgb(255 255 255 / 34%); --glass-rim-lo: rgb(255 255 255 / 14%); --shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 6px 18px rgb(0 0 0 / 22%); --shadow-raised: 0 2px 6px rgb(0 0 0 / 34%), 0 12px 28px rgb(0 0 0 / 30%); --bezel: var(--c-surface-sunk); --bezel-ring: color-mix(in srgb, var(--c-text) 18%, transparent); --core-hi: inset 0 1px 0 rgb(255 255 255 / 5%); --honey-glow: color-mix(in srgb, var(--c-honey) 24%, transparent); }
@media (max-width: 599px) { :root[data-theme-preset="night"] .moon { top: 62px; right: 30px; width: 46px; } }
:root[data-theme-preset="night"] .scene-home { --sky-bg: linear-gradient(180deg, var(--sky-night-0), var(--sky-night-1) 60%, var(--sky-night-2)); }
:root[data-theme-preset="night"] .scene-space { --sky-bg: linear-gradient(180deg, var(--sky-night-0), var(--sky-night-1) 56%, color-mix(in srgb, var(--sky-dusk-1) 55%, var(--sky-night-2))); }
:root[data-theme-preset="night"] .scene-focus { --sky-bg: linear-gradient(180deg, var(--sky-night-0), var(--sky-night-1) 56%, color-mix(in srgb, var(--sky-dusk-2) 32%, var(--sky-night-2))); }
:root[data-theme-preset="night"] .scene-grow { --sky-bg: linear-gradient(180deg, var(--sky-night-0), var(--sky-dawn-0) 58%, color-mix(in srgb, var(--sky-dawn-1) 40%, var(--sky-dawn-0))); }
:root[data-theme-preset="night"] .scene-light { display: none; }
:root[data-theme-preset="night"] .scene-stars, :root[data-theme-preset="night"] .scene-home .scene-moon { display: block; }
:root[data-theme-preset="night"] .scene .scene-cloud { opacity: 0.3; }
:root[data-theme-preset="night"] .scene-grow .scene-cloud { opacity: 0.25; }
:root[data-theme-preset="night"] .scene-visitor { display: none; }
:root[data-theme-preset="night"] .scene-sky::after { --fly: radial-gradient(closest-side, color-mix(in srgb, var(--c-honey) 80%, #fff7e0) 0 22%, color-mix(in srgb, var(--c-honey) 32%, transparent) 46%, transparent); content: ''; position: absolute; inset: 0; background: var(--fly) 8% 52% / 3.2cqw 3.2cqw, var(--fly) 30% 58% / 2.4cqw 2.4cqw, var(--fly) 18% 44% / 2.8cqw 2.8cqw, var(--fly) 36% 68% / 2cqw 2cqw, var(--fly) 3% 92% / 2.6cqw 2.6cqw; background-repeat: no-repeat; }
:root[data-theme-preset="night"] .feature-flip .scene-sky::after { scale: -1 1; }
:root[data-theme-preset="night"] .who-kids { --who-bg: linear-gradient(180deg, var(--sky-night-0), var(--sky-dawn-0) 60%, color-mix(in srgb, var(--sky-dawn-1) 45%, var(--sky-dawn-0))); }
:root[data-theme-preset="night"] .who-teens { --who-bg: linear-gradient(180deg, var(--sky-night-0), var(--sky-night-1) 56%, color-mix(in srgb, var(--sky-dusk-1) 55%, var(--sky-night-2))); }
:root[data-theme-preset="night"] .who-kids, :root[data-theme-preset="night"] .who-teens { --who-light: none; --who-stars: block; }
:root[data-theme-preset="night"] .sky { background: linear-gradient(180deg, var(--sky-night-0) 0%, var(--sky-night-1) 40%, var(--sky-night-2) 70%, var(--c-background) 100%); }
:root[data-theme-preset="night"] .sun { display: none; }
:root[data-theme-preset="night"] .island { background-image: url('assets/island-night-1200.webp'); }
:root[data-theme-preset="night"] .moon { display: block; position: absolute; top: clamp(84px, 5vw + 62px, 158px); right: clamp(34px, 14vw, 250px); width: clamp(44px, 2.4vw + 34px, 72px); aspect-ratio: 1; background: url('assets/moon.webp') center / contain no-repeat; }
:root[data-theme-preset="night"] .stars { display: block; position: absolute; inset: 0 0 48% 0; opacity: 0.85; background-image: radial-gradient(1.4px 1.4px at 12% 18%, #fff 60%, transparent), radial-gradient(1.2px 1.2px at 28% 8%, #fff 60%, transparent), radial-gradient(1.6px 1.6px at 44% 22%, #fff 60%, transparent), radial-gradient(1.1px 1.1px at 62% 12%, #fff 60%, transparent), radial-gradient(1.3px 1.3px at 76% 26%, #fff 60%, transparent), radial-gradient(1.2px 1.2px at 88% 6%, #fff 60%, transparent), radial-gradient(1px 1px at 8% 34%, #fff 60%, transparent), radial-gradient(1.4px 1.4px at 54% 36%, #fff 60%, transparent), radial-gradient(1px 1px at 92% 40%, #fff 60%, transparent), radial-gradient(1.2px 1.2px at 36% 44%, #fff 60%, transparent), radial-gradient(1.1px 1.1px at 20% 52%, #fff 60%, transparent), radial-gradient(1.3px 1.3px at 70% 48%, #fff 60%, transparent); }
:root[data-theme-preset="night"] .cloud { opacity: 0.35; }
:root[data-theme-preset="night"] .stage .cloud-c { opacity: 0.25; }
/* the panel's chip discs: paper + ink of each preset in the current mode; Auto is split light | dark Garden */
.theme-chip[data-theme-id="auto"] {
  --sw-bg: #F7F1E6;
  --sw-bg2: #131D18;
  --sw-border: #E3D9C8;
  --sw-accent: #2F6B45;
  --sw-on: #FFFFFF;
}
.theme-chip[data-theme-id="ocean"] {
  --sw-bg: #E5F6F6;
  --sw-border: #C6E1E0;
  --sw-accent: #006B70;
  --sw-on: #FFFFFF;
}
.theme-chip[data-theme-id="sky"] {
  --sw-bg: #EAF3FC;
  --sw-border: #CEDCEA;
  --sw-accent: #2F59AB;
  --sw-on: #FFFFFF;
}
.theme-chip[data-theme-id="lavender"] {
  --sw-bg: #F4EEFC;
  --sw-border: #DED5EB;
  --sw-accent: #6742A2;
  --sw-on: #FFFFFF;
}
.theme-chip[data-theme-id="berry"] {
  --sw-bg: #FCECF3;
  --sw-border: #EAD2DD;
  --sw-accent: #9A2C7E;
  --sw-on: #FFFFFF;
}
.theme-chip[data-theme-id="night"] {
  --sw-bg: #11142E;
  --sw-border: #2F3969;
  --sw-accent: #96DDB6;
  --sw-on: #0D251A;
}
@media (prefers-color-scheme: dark) {
  .theme-chip[data-theme-id="auto"] {
    --sw-border: #34463C;
    --sw-accent: #93D3A2;
    --sw-on: #0F2517;
  }
  .theme-chip[data-theme-id="ocean"] {
    --sw-bg: #0A1D21;
    --sw-border: #23474D;
    --sw-accent: #57CEBD;
    --sw-on: #002622;
  }
  .theme-chip[data-theme-id="sky"] {
    --sw-bg: #111A25;
    --sw-border: #2F4256;
    --sw-accent: #73A3FC;
    --sw-on: #121E3B;
  }
  .theme-chip[data-theme-id="lavender"] {
    --sw-bg: #1C1627;
    --sw-border: #433A5A;
    --sw-accent: #C8AEFA;
    --sw-on: #241A31;
  }
  .theme-chip[data-theme-id="berry"] {
    --sw-bg: #25131C;
    --sw-border: #553446;
    --sw-accent: #FDBADF;
    --sw-on: #2D1823;
  }
}