/* Extra colour themes. Sunrise, Canyon, Wildflower and Granite, in light and dark. */

/* Sunrise */
.app-shell[data-appearance-scheme="sunrise"][data-appearance-mode="light"] {
  --app-bg: #eae0db;
  --surface: #fcf5f3;
  --surface-raised: #ffffff;
  --surface-soft: #f5eae5;
  --surface-muted: #f9f0ea;
  --surface-hover: #f9efe9;
  --surface-active: #f6e7de;
  --surface-translucent: rgb(252 245 243 / 96%);
  --raised-translucent: rgb(255 255 255 / 96%);
  --text: #322517;
  --text-strong: #2a1e12;
  --text-muted: #7a6858;
  --text-faint: #918375;
  --border: #ded2c9;
  --border-strong: #d1bfb1;
  --accent: #76470e;
  --accent-hover: #61390a;
  --accent-text: #6a3d06;
  --accent-soft: #f5e5d8;
  --accent-border: #c7a17f;
  --focus: #b27618;
  --focus-ring: rgb(178 118 24 / 18%);
  --nav-bg: #271a0a;
  --nav-panel: #332210;
  --nav-control: #3f2d1b;
  --nav-hover: #4a3622;
  --nav-text: #e1d1c3;
  --nav-active-text: #fffbf7;
  --nav-muted: #aa9682;
  --nav-border: #4e3a26;
  --nav-accent: #c4a35e;
  --gold: #a97835;
  --danger: #a64542;
  --danger-soft: #f5e7e4;
  --danger-border: #ddb9b3;
  --scripture-text: #39291a;
  --shadow: rgb(64 36 6 / 20%);
}

.app-shell[data-appearance-scheme="sunrise"][data-appearance-mode="dark"] {
  --app-bg: #191109;
  --surface: #261a0e;
  --surface-raised: #312113;
  --surface-soft: #3a2817;
  --surface-muted: #322213;
  --surface-hover: #3f2b18;
  --surface-active: #48301e;
  --surface-translucent: rgb(38 26 14 / 96%);
  --raised-translucent: rgb(49 33 19 / 96%);
  --text: #f3e7df;
  --text-strong: #fbf4ef;
  --text-muted: #c1ac9b;
  --text-faint: #a6927f;
  --border: #523c29;
  --border-strong: #6e523a;
  --accent: #d09a66;
  --accent-hover: #dfae7f;
  --accent-text: #edc6a5;
  --accent-soft: #50361c;
  --accent-border: #856141;
  --focus: #e2a03e;
  --focus-ring: rgb(226 160 62 / 22%);
  --nav-bg: #140c04;
  --nav-panel: #1d1309;
  --nav-control: #2e1f12;
  --nav-hover: #412c1a;
  --nav-text: #e0cec0;
  --nav-active-text: #fff9f5;
  --nav-muted: #a9917e;
  --nav-border: #443020;
  --nav-accent: #c5a45e;
  --gold: #caa15b;
  --scripture-text: #f6eae5;
}

.scheme-sunrise {
  --preview-nav: #332210;
  --preview-surface: #fcf5f3;
  --preview-accent: #d09a66;
}

.app-shell[data-appearance-mode="dark"] .scheme-sunrise {
  --preview-nav: #1d1309;
  --preview-surface: #261a0e;
  --preview-accent: #d09a66;
}

/* Canyon */
.app-shell[data-appearance-scheme="canyon"][data-appearance-mode="light"] {
  --app-bg: #e8dedd;
  --surface: #fbf4f4;
  --surface-raised: #ffffff;
  --surface-soft: #f3e7e7;
  --surface-muted: #f7edec;
  --surface-hover: #f7eceb;
  --surface-active: #f3e2e1;
  --surface-translucent: rgb(251 244 244 / 96%);
  --raised-translucent: rgb(255 255 255 / 96%);
  --text: #2e1f1b;
  --text-strong: #271915;
  --text-muted: #75615c;
  --text-faint: #8d7d79;
  --border: #dccdcb;
  --border-strong: #cdb8b5;
  --accent: #692e1b;
  --accent-hover: #562515;
  --accent-text: #5e2513;
  --accent-soft: #f2dedb;
  --accent-border: #be9288;
  --focus: #9e4f2b;
  --focus-ring: rgb(158 79 43 / 18%);
  --nav-bg: #24130d;
  --nav-panel: #2e1a15;
  --nav-control: #3b251f;
  --nav-hover: #452d27;
  --nav-text: #ddcac6;
  --nav-active-text: #fff8f7;
  --nav-muted: #a58d87;
  --nav-border: #49312b;
  --nav-accent: #c4a35e;
  --gold: #a97835;
  --danger: #a64542;
  --danger-soft: #f5e7e4;
  --danger-border: #ddb9b3;
  --scripture-text: #35231e;
  --shadow: rgb(56 23 13 / 20%);
}

.app-shell[data-appearance-scheme="canyon"][data-appearance-mode="dark"] {
  --app-bg: #170d0b;
  --surface: #231511;
  --surface-raised: #2d1b16;
  --surface-soft: #35211c;
  --surface-muted: #2e1c17;
  --surface-hover: #3a231d;
  --surface-active: #422723;
  --surface-translucent: rgb(35 21 17 / 96%);
  --raised-translucent: rgb(45 27 22 / 96%);
  --text: #f1e3e2;
  --text-strong: #faf1f0;
  --text-muted: #bca49f;
  --text-faint: #a18984;
  --border: #4d332e;
  --border-strong: #674741;
  --accent: #c28273;
  --accent-hover: #d3998b;
  --accent-text: #e4b6ae;
  --accent-soft: #4a2a23;
  --accent-border: #7d524a;
  --focus: #ce7752;
  --focus-ring: rgb(206 119 82 / 22%);
  --nav-bg: #120806;
  --nav-panel: #1b0e0b;
  --nav-control: #2b1916;
  --nav-hover: #3c241f;
  --nav-text: #dcc7c4;
  --nav-active-text: #fff6f5;
  --nav-muted: #a38884;
  --nav-border: #402825;
  --nav-accent: #c5a45e;
  --gold: #caa15b;
  --scripture-text: #f4e7e7;
}

.scheme-canyon {
  --preview-nav: #2e1a15;
  --preview-surface: #fbf4f4;
  --preview-accent: #c28273;
}

.app-shell[data-appearance-mode="dark"] .scheme-canyon {
  --preview-nav: #1b0e0b;
  --preview-surface: #231511;
  --preview-accent: #c28273;
}

/* Wildflower */
.app-shell[data-appearance-scheme="wildflower"][data-appearance-mode="light"] {
  --app-bg: #e7dee7;
  --surface: #fbf4fb;
  --surface-raised: #ffffff;
  --surface-soft: #f3e7f2;
  --surface-muted: #f6edf5;
  --surface-hover: #f7ebf6;
  --surface-active: #f2e2f1;
  --surface-translucent: rgb(251 244 251 / 96%);
  --raised-translucent: rgb(255 255 255 / 96%);
  --text: #2e1b29;
  --text-strong: #261623;
  --text-muted: #745d6f;
  --text-faint: #8d7988;
  --border: #dbccd9;
  --border-strong: #ccb6c8;
  --accent: #661e52;
  --accent-hover: #541743;
  --accent-text: #5b1547;
  --accent-soft: #f1dced;
  --accent-border: #bc8ab2;
  --focus: #9a2f75;
  --focus-ring: rgb(154 47 117 / 18%);
  --nav-bg: #230e1d;
  --nav-panel: #2d1627;
  --nav-control: #3a2034;
  --nav-hover: #44283e;
  --nav-text: #dcc7d8;
  --nav-active-text: #fff7fe;
  --nav-muted: #a4889d;
  --nav-border: #482c42;
  --nav-accent: #c4a35e;
  --gold: #a97835;
  --danger: #a64542;
  --danger-soft: #f5e7e4;
  --danger-border: #ddb9b3;
  --scripture-text: #341f2f;
  --shadow: rgb(55 14 44 / 20%);
}

.app-shell[data-appearance-scheme="wildflower"][data-appearance-mode="dark"] {
  --app-bg: #170b14;
  --surface: #22121f;
  --surface-raised: #2c1727;
  --surface-soft: #341d2f;
  --surface-muted: #2d1828;
  --surface-hover: #391e33;
  --surface-active: #41243c;
  --surface-translucent: rgb(34 18 31 / 96%);
  --raised-translucent: rgb(44 23 39 / 96%);
  --text: #f0e2ee;
  --text-strong: #f9f1f8;
  --text-muted: #bba0b6;
  --text-faint: #a0859a;
  --border: #4c2f46;
  --border-strong: #66425f;
  --accent: #c075af;
  --accent-hover: #d18dc2;
  --accent-text: #e2b0d9;
  --accent-soft: #482440;
  --accent-border: #7b4b71;
  --focus: #c957a3;
  --focus-ring: rgb(201 87 163 / 22%);
  --nav-bg: #12060f;
  --nav-panel: #1a0c17;
  --nav-control: #2a1626;
  --nav-hover: #3b2036;
  --nav-text: #dbc5d7;
  --nav-active-text: #fff5fd;
  --nav-muted: #a2859d;
  --nav-border: #3f253a;
  --nav-accent: #c5a45e;
  --gold: #caa15b;
  --scripture-text: #f4e7f3;
}

.scheme-wildflower {
  --preview-nav: #2d1627;
  --preview-surface: #fbf4fb;
  --preview-accent: #c075af;
}

.app-shell[data-appearance-mode="dark"] .scheme-wildflower {
  --preview-nav: #1a0c17;
  --preview-surface: #22121f;
  --preview-accent: #c075af;
}

/* Granite */
.app-shell[data-appearance-scheme="granite"][data-appearance-mode="light"] {
  --app-bg: #e2e3e3;
  --surface: #f7f8f8;
  --surface-raised: #ffffff;
  --surface-soft: #ecedee;
  --surface-muted: #f1f2f2;
  --surface-hover: #f0f1f2;
  --surface-active: #e9eaeb;
  --surface-translucent: rgb(247 248 248 / 96%);
  --raised-translucent: rgb(255 255 255 / 96%);
  --text: #232426;
  --text-strong: #1d1e1f;
  --text-muted: #67686a;
  --text-faint: #818385;
  --border: #d2d3d5;
  --border-strong: #bfc1c3;
  --accent: #3c4048;
  --accent-hover: #31343a;
  --accent-text: #33363d;
  --accent-soft: #e5e6e8;
  --accent-border: #9fa2a7;
  --focus: #5c616d;
  --focus-ring: rgb(92 97 109 / 18%);
  --nav-bg: #17181a;
  --nav-panel: #202123;
  --nav-control: #2b2d2f;
  --nav-hover: #343638;
  --nav-text: #d0d1d3;
  --nav-active-text: #fafbfc;
  --nav-muted: #949698;
  --nav-border: #383a3c;
  --nav-accent: #c4a35e;
  --gold: #a97835;
  --danger: #a64542;
  --danger-soft: #f5e7e4;
  --danger-border: #ddb9b3;
  --scripture-text: #28292b;
  --shadow: rgb(31 34 38 / 20%);
}

.app-shell[data-appearance-scheme="granite"][data-appearance-mode="dark"] {
  --app-bg: #101112;
  --surface: #191a1b;
  --surface-raised: #202123;
  --surface-soft: #27282a;
  --surface-muted: #212224;
  --surface-hover: #292b2e;
  --surface-active: #303235;
  --surface-translucent: rgb(25 26 27 / 96%);
  --raised-translucent: rgb(32 33 35 / 96%);
  --text: #e8e9ea;
  --text-strong: #f4f5f6;
  --text-muted: #abadb0;
  --text-faint: #909295;
  --border: #3b3d40;
  --border-strong: #515457;
  --accent: #9599a0;
  --accent-hover: #aaaeb4;
  --accent-text: #c5c9cd;
  --accent-soft: #333539;
  --accent-border: #5f6367;
  --focus: #878c99;
  --focus-ring: rgb(135 140 153 / 22%);
  --nav-bg: #0b0c0d;
  --nav-panel: #121314;
  --nav-control: #1e2022;
  --nav-hover: #2b2d30;
  --nav-text: #ced0d2;
  --nav-active-text: #f9fafb;
  --nav-muted: #919396;
  --nav-border: #303234;
  --nav-accent: #c5a45e;
  --gold: #caa15b;
  --scripture-text: #edeeee;
}

.scheme-granite {
  --preview-nav: #202123;
  --preview-surface: #f7f8f8;
  --preview-accent: #9599a0;
}

.app-shell[data-appearance-mode="dark"] .scheme-granite {
  --preview-nav: #121314;
  --preview-surface: #191a1b;
  --preview-accent: #9599a0;
}