body[data-theme="home"] {
  --bg: #e9decf;
  --bg-deep: #cdb9a4;
  --surface: #fff9ef;
  --surface-strong: #fffdf8;
  --surface-soft: #e5d7c3;
  --ink: #382a24;
  --muted: #79665c;
  --line: rgb(88 61 47 / 21%);
  --accent: #a44c34;
  --accent-strong: #7e3525;
  --accent-soft: #efc8b4;
  --second: #39766b;
  background:
    radial-gradient(circle at 12% 0%, rgb(255 244 214 / 78%), transparent 34%),
    linear-gradient(118deg, rgb(101 65 44 / 7%) 0 1px, transparent 1px 54px),
    var(--bg);
}

body[data-theme="parent"] {
  color-scheme: dark;
  --bg: #2d201a;
  --bg-deep: #1d1512;
  --surface: #3a2922;
  --surface-strong: #473029;
  --surface-soft: #33231e;
  --ink: #fff7e9;
  --muted: #c9b8aa;
  --line: rgb(247 217 190 / 18%);
  --accent: #d1774f;
  --accent-strong: #a84b37;
  --accent-soft: #693b31;
  --second: #d8aa63;
  --focus: #f1bf65;
  --shadow-soft: 0 18px 55px rgb(0 0 0 / 24%);
  --shadow-lift: 0 26px 80px rgb(0 0 0 / 35%);
  background:
    radial-gradient(circle at 84% 0%, rgb(145 66 39 / 34%), transparent 38%),
    repeating-linear-gradient(94deg, transparent 0 64px, rgb(255 255 255 / 2%) 65px),
    var(--bg);
}

body[data-theme="child"] {
  color-scheme: light;
  --bg: #edf3ed;
  --bg-deep: #d6e4df;
  --surface: #fffdf7;
  --surface-strong: #ffffff;
  --surface-soft: #dcebe5;
  --ink: #203936;
  --muted: #607773;
  --line: rgb(50 103 96 / 20%);
  --accent: #db7548;
  --accent-strong: #b95534;
  --accent-soft: #ffd6bd;
  --second: #3b8178;
  --focus: #d86f42;
  background:
    radial-gradient(circle at 92% 2%, rgb(255 190 119 / 48%), transparent 34%),
    radial-gradient(circle at 0% 100%, rgb(89 168 154 / 25%), transparent 43%),
    var(--bg);
}

body[data-theme="joint"] {
  color-scheme: light;
  --bg: #eee4d5;
  --bg-deep: #d5c2ab;
  --surface: #fff9ee;
  --surface-strong: #fffdf8;
  --surface-soft: #e9dcc8;
  --ink: #342a26;
  --muted: #75645c;
  --line: rgb(84 62 52 / 20%);
  --accent: #a9513a;
  --accent-strong: #853724;
  --accent-soft: #f0c6b2;
  --second: #3c796f;
  background:
    radial-gradient(circle at 0% 12%, rgb(139 69 46 / 19%), transparent 34%),
    radial-gradient(circle at 100% 88%, rgb(74 142 129 / 21%), transparent 40%),
    var(--bg);
}