/*
 * Dayflow theme layer adapted from the canonical EmpireOS restaurant theme system.
 * Source registry: EmpireOS restaurant theme registry.
 * Source tokens: EmpireOS restaurant theme styles.
 */

@font-face {
  font-family: "EOS Host Grotesk";
  src: url("./assets/fonts/host-grotesk-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}

@font-face {
  font-family: "EOS Anybody";
  src: url("./assets/fonts/anybody-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "EOS Onest";
  src: url("./assets/fonts/onest-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "EOS Newsreader";
  src: url("./assets/fonts/newsreader-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "EOS Outfit";
  src: url("./assets/fonts/outfit-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "EOS Quicksand";
  src: url("./assets/fonts/quicksand-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "EOS Khand";
  src: url("./assets/fonts/khand-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "EOS Khand";
  src: url("./assets/fonts/khand-latin-600-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "EOS Khand";
  src: url("./assets/fonts/khand-latin-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "EOS IBM Plex Sans";
  src: url("./assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "EOS IBM Plex Sans";
  src: url("./assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "EOS IBM Plex Sans";
  src: url("./assets/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "EOS IBM Plex Mono";
  src: url("./assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "EOS IBM Plex Mono";
  src: url("./assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "EOS Archivo";
  src: url("./assets/fonts/archivo-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "EOS Archivo";
  src: url("./assets/fonts/archivo-latin-600-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "EOS Archivo";
  src: url("./assets/fonts/archivo-latin-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "EOS Archivo Narrow";
  src: url("./assets/fonts/archivo-narrow-latin-600-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "EOS Archivo Narrow";
  src: url("./assets/fonts/archivo-narrow-latin-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "EOS Nunito Sans";
  src: url("./assets/fonts/nunito-sans-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "EOS Nunito Sans";
  src: url("./assets/fonts/nunito-sans-latin-600-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "EOS Nunito Sans";
  src: url("./assets/fonts/nunito-sans-latin-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "EOS Varela Round";
  src: url("./assets/fonts/varela-round-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root[data-theme] {
  --hero-text: #ffffff;
  --focus-text: #ffffff;
  --faith-text: #ffffff;
  --focus-ring: color-mix(in srgb, var(--accent) 68%, white);
}

:root[data-theme="verdant-ledger"] {
  color-scheme: light;
  --bg: #e7ebe9;
  --bg-deep: #f1f4f2;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-soft: #f6f8f7;
  --surface-raised: #e7efeb;
  --ink: #17221c;
  --muted-readable: #3c4c43;
  --muted: #64726b;
  --faint: #64726b;
  --line: #e1e8e4;
  --line-strong: #c9d5cf;
  --accent: #0b7d4b;
  --accent-2: #08663e;
  --accent-readable: #08663e;
  --accent-soft: #e5f4ec;
  --on-accent: #ffffff;
  --mint: #147449;
  --mint-soft: #e7f5ed;
  --amber: #8b5a0d;
  --amber-soft: #fff4dc;
  --coral: #b42318;
  --coral-soft: #fef0ee;
  --danger: #b42318;
  --shadow-sm: 0 1px 2px rgb(22 41 31 / 6%), 0 7px 18px -16px rgb(22 41 31 / 18%);
  --shadow-lg: 0 26px 72px -34px rgb(22 41 31 / 34%), 0 8px 24px -18px rgb(22 41 31 / 16%);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --brand-hi: #13935b;
  --brand-lo: #08663e;
  --hero-from: #08663e;
  --hero-mid: #0b7d4b;
  --hero-to: #155f4d;
  --focus-from: #17221c;
  --focus-to: #155f4d;
  --focus-inner: #17221c;
  --faith-from: #08663e;
  --faith-to: #0b7d4b;
  --font-display: "EOS Host Grotesk", "Avenir Next", system-ui, sans-serif;
  --font-ui: "EOS Host Grotesk", "Avenir Next", system-ui, sans-serif;
  --font-data: "EOS Host Grotesk", "Avenir Next", system-ui, sans-serif;
  --type-display-weight: 680;
  --type-display-tracking: -.025em;
  --theme-duration: 280ms;
  --theme-focal-duration: 420ms;
  --theme-ease: cubic-bezier(.22, 1, .36, 1);
}

:root[data-theme="nocturne"] {
  color-scheme: dark;
  --bg: #080608;
  --bg-deep: #0d0a0d;
  --surface: #151116;
  --surface-solid: #151116;
  --surface-soft: #211a21;
  --surface-raised: #2b232b;
  --ink: #f8f3f6;
  --muted-readable: #d8ccd4;
  --muted: #ad9ea8;
  --faint: #ad9ea8;
  --line: #302730;
  --line-strong: #564652;
  --accent: #e29ac8;
  --accent-2: #c77ba9;
  --accent-readable: #e7b7d5;
  --accent-soft: rgb(226 154 200 / 16%);
  --on-accent: #21141d;
  --mint: #72d6a4;
  --mint-soft: rgb(114 214 164 / 15%);
  --amber: #f5c06b;
  --amber-soft: rgb(245 192 107 / 15%);
  --coral: #f08b99;
  --coral-soft: rgb(240 139 153 / 16%);
  --danger: #f08b99;
  --shadow-sm: 0 2px 3px rgb(0 0 0 / 32%);
  --shadow-lg: 0 30px 80px -24px rgb(0 0 0 / 78%), 0 8px 22px rgb(0 0 0 / 36%);
  --radius-sm: 11px;
  --radius: 22px;
  --radius-lg: 28px;
  --brand-hi: #f4b9de;
  --brand-lo: #bd789f;
  --hero-from: #564652;
  --hero-mid: #382d36;
  --hero-to: #151116;
  --focus-from: #211a21;
  --focus-to: #0d0a0d;
  --focus-inner: #151116;
  --faith-from: #27624a;
  --faith-to: #173f31;
  --font-display: "EOS Anybody", "Avenir Next", system-ui, sans-serif;
  --font-ui: "EOS Anybody", "Avenir Next", system-ui, sans-serif;
  --font-data: "EOS Anybody", "Avenir Next", system-ui, sans-serif;
  --type-display-weight: 720;
  --type-display-tracking: -.035em;
  --theme-duration: 360ms;
  --theme-focal-duration: 520ms;
  --theme-ease: cubic-bezier(.16, 1, .3, 1);
}

:root[data-theme="tideglass"] {
  color-scheme: light;
  --bg: #e7eef1;
  --bg-deep: #eef5f6;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-soft: #f5f9fa;
  --surface-raised: #e4f1f2;
  --ink: #102540;
  --muted-readable: #344b64;
  --muted: #5f7185;
  --faint: #5f7185;
  --line: #e1eaed;
  --line-strong: #c9d9dd;
  --accent: #0d8296;
  --accent-2: #086b7d;
  --accent-readable: #086b7d;
  --accent-soft: #e2f4f6;
  --on-accent: #ffffff;
  --mint: #0f7a68;
  --mint-soft: #e2f5ef;
  --amber: #8a5a12;
  --amber-soft: #fff3dd;
  --coral: #b42335;
  --coral-soft: #fff0f2;
  --danger: #b42335;
  --shadow-sm: 0 1px 2px rgb(20 49 68 / 5%), 0 8px 20px -18px rgb(20 49 68 / 22%);
  --shadow-lg: 0 30px 82px -36px rgb(20 49 68 / 38%), 0 10px 28px -20px rgb(20 49 68 / 18%);
  --radius-sm: 11px;
  --radius: 18px;
  --radius-lg: 28px;
  --brand-hi: #28b5c7;
  --brand-lo: #123e66;
  --hero-from: #086b7d;
  --hero-mid: #0d8296;
  --hero-to: #123e66;
  --focus-from: #102540;
  --focus-to: #123e66;
  --focus-inner: #102540;
  --faith-from: #0f7a68;
  --faith-to: #0d8296;
  --font-display: "EOS Onest", "Avenir Next", system-ui, sans-serif;
  --font-ui: "EOS Onest", "Avenir Next", system-ui, sans-serif;
  --font-data: "EOS Onest", "Avenir Next", system-ui, sans-serif;
  --type-display-weight: 680;
  --type-display-tracking: -.025em;
  --theme-duration: 320ms;
  --theme-focal-duration: 560ms;
  --theme-ease: cubic-bezier(.2, .82, .24, 1);
}

:root[data-theme="gallery-ink"] {
  color-scheme: light;
  --bg: #f3f0ea;
  --bg-deep: #eae5dd;
  --surface: #fffdf9;
  --surface-solid: #fffdf9;
  --surface-soft: #f7f3ed;
  --surface-raised: #eee8df;
  --ink: #121210;
  --muted-readable: #45413c;
  --muted: #6d6760;
  --faint: #6d6760;
  --line: #e3dbd1;
  --line-strong: #c8beb2;
  --accent: #171715;
  --accent-2: #090908;
  --accent-readable: #171715;
  --accent-soft: #fae9dc;
  --on-accent: #fffdf9;
  --mint: #276549;
  --mint-soft: #e4f0e8;
  --amber: #9a5e25;
  --amber-soft: #f8ead8;
  --coral: #a53e38;
  --coral-soft: #f8e4e0;
  --danger: #a53e38;
  --shadow-sm: 0 1px 2px rgb(35 30 25 / 5%);
  --shadow-lg: 0 26px 64px -38px rgb(35 30 25 / 35%), 0 8px 20px rgb(35 30 25 / 6%);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 16px;
  --brand-hi: #171715;
  --brand-lo: #4b4842;
  --hero-from: #171715;
  --hero-mid: #45413c;
  --hero-to: #121210;
  --focus-from: #121210;
  --focus-to: #45413c;
  --focus-inner: #121210;
  --faith-from: #276549;
  --faith-to: #3d7c60;
  --font-display: "EOS Newsreader", Georgia, "Times New Roman", serif;
  --font-ui: "Afacad Flux", "Avenir Next", system-ui, sans-serif;
  --font-data: "Afacad Flux", "Avenir Next", system-ui, sans-serif;
  --type-display-weight: 600;
  --type-display-tracking: -.015em;
  --theme-duration: 420ms;
  --theme-focal-duration: 580ms;
  --theme-ease: cubic-bezier(.19, 1, .22, 1);
}

:root[data-theme="nightshift"] {
  color-scheme: dark;
  --bg: #090b09;
  --bg-deep: #060706;
  --surface: #111411;
  --surface-solid: #111411;
  --surface-soft: #171b17;
  --surface-raised: #202520;
  --ink: #f0f4ed;
  --muted-readable: #c1c9bd;
  --muted: #929c8e;
  --faint: #929c8e;
  --line: #262c26;
  --line-strong: #384038;
  --accent: #b9f542;
  --accent-2: #a8e431;
  --accent-readable: #c4ff4b;
  --accent-soft: rgb(185 245 66 / 13%);
  --on-accent: #10150a;
  --mint: #b9f542;
  --mint-soft: rgb(185 245 66 / 13%);
  --amber: #e3b75f;
  --amber-soft: rgb(227 183 95 / 13%);
  --coral: #f07d78;
  --coral-soft: rgb(240 125 120 / 13%);
  --danger: #f07d78;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 28%);
  --shadow-lg: 0 24px 56px -30px rgb(0 0 0 / 82%), 0 6px 16px rgb(0 0 0 / 34%);
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 8px;
  --brand-hi: #d6ff81;
  --brand-lo: #a6dc3e;
  --hero-from: #202520;
  --hero-mid: #263119;
  --hero-to: #090b09;
  --focus-from: #202520;
  --focus-to: #090b09;
  --focus-inner: #111411;
  --faith-from: #22350f;
  --faith-to: #101a09;
  --font-display: "EOS Khand", "Arial Narrow", sans-serif;
  --font-ui: "EOS Khand", "Arial Narrow", sans-serif;
  --font-data: "EOS IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --type-display-weight: 700;
  --type-display-tracking: .002em;
  --theme-duration: 180ms;
  --theme-focal-duration: 220ms;
  --theme-ease: cubic-bezier(.2, .9, .25, 1);
}

:root[data-theme="violet-ledger"] {
  color-scheme: light;
  --bg: #f4f3f8;
  --bg-deep: #eceaf2;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-soft: #f8f7fb;
  --surface-raised: #ece9f5;
  --ink: #171724;
  --muted-readable: #47475b;
  --muted: #69697d;
  --faint: #69697d;
  --line: #e5e1ed;
  --line-strong: #cbc6d9;
  --accent: #6249df;
  --accent-2: #4f38c5;
  --accent-readable: #4f38c5;
  --accent-soft: #eeeafd;
  --on-accent: #ffffff;
  --mint: #167356;
  --mint-soft: #e8f6f0;
  --amber: #925615;
  --amber-soft: #fff4df;
  --coral: #b4233c;
  --coral-soft: #fff0f3;
  --danger: #b4233c;
  --shadow-sm: 0 1px 2px rgb(23 23 36 / 7%);
  --shadow-lg: 0 24px 64px -30px rgb(23 23 36 / 34%), 0 8px 20px rgb(23 23 36 / 8%);
  --radius-sm: 9px;
  --radius: 20px;
  --radius-lg: 26px;
  --brand-hi: #7561ea;
  --brand-lo: #4c34c5;
  --hero-from: #4f38c5;
  --hero-mid: #5940d4;
  --hero-to: #342686;
  --focus-from: #171724;
  --focus-to: #4f38c5;
  --focus-inner: #171724;
  --faith-from: #167356;
  --faith-to: #115b45;
  --font-display: "EOS Outfit", "Avenir Next", system-ui, sans-serif;
  --font-ui: "EOS Outfit", "Avenir Next", system-ui, sans-serif;
  --font-data: "EOS Outfit", "Avenir Next", system-ui, sans-serif;
  --type-display-weight: 650;
  --type-display-tracking: -.025em;
  --theme-duration: 340ms;
  --theme-focal-duration: 460ms;
  --theme-ease: cubic-bezier(.2, .86, .24, 1);
}

:root[data-theme="monochrome"] {
  color-scheme: light;
  --bg: #e9e9ec;
  --bg-deep: #dedee2;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-soft: #f4f4f5;
  --surface-raised: #e7e7e9;
  --ink: #18191b;
  --muted-readable: #494a4e;
  --muted: #66676c;
  --faint: #66676c;
  --line: #dedee1;
  --line-strong: #c7c7ca;
  --accent: #202124;
  --accent-2: #111214;
  --accent-readable: #202124;
  --accent-soft: #ededee;
  --on-accent: #ffffff;
  --mint: #287159;
  --mint-soft: #eaf4f0;
  --amber: #82601b;
  --amber-soft: #f7f1e4;
  --coral: #a63b47;
  --coral-soft: #f8ebed;
  --danger: #a63b47;
  --shadow-sm: none;
  --shadow-lg: 0 18px 44px -30px rgb(18 19 21 / 30%);
  --radius-sm: 5px;
  --radius: 10px;
  --radius-lg: 12px;
  --brand-hi: #3b3c40;
  --brand-lo: #17181a;
  --hero-from: #414247;
  --hero-mid: #202124;
  --hero-to: #111214;
  --focus-from: #18191b;
  --focus-to: #414247;
  --focus-inner: #18191b;
  --faith-from: #287159;
  --faith-to: #3b8068;
  --font-display: "EOS IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "EOS IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-data: "EOS IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --type-display-weight: 600;
  --type-display-tracking: -.015em;
  --theme-duration: 200ms;
  --theme-focal-duration: 220ms;
  --theme-ease: steps(2, end);
}

:root[data-theme="aurora-mint"] {
  color-scheme: light;
  --bg: #deeff0;
  --bg-deep: #d4e8ea;
  --surface: rgb(255 255 255 / 88%);
  --surface-solid: #ffffff;
  --surface-soft: rgb(244 251 250 / 88%);
  --surface-raised: #dcefed;
  --ink: #173234;
  --muted-readable: #3f5d60;
  --muted: #5f7478;
  --faint: #5f7478;
  --line: #cfe2e1;
  --line-strong: #accbc9;
  --accent: #0b7774;
  --accent-2: #075f5d;
  --accent-readable: #075f5d;
  --accent-soft: #d8efed;
  --on-accent: #ffffff;
  --mint: #2b765d;
  --mint-soft: #e0f2e9;
  --amber: #91641b;
  --amber-soft: #fff4d9;
  --coral: #b53d63;
  --coral-soft: #fdebf1;
  --danger: #b53d63;
  --shadow-sm: 0 1px 3px rgb(20 43 45 / 7%);
  --shadow-lg: 0 28px 76px -42px rgb(20 43 45 / 38%), 0 8px 24px rgb(20 43 45 / 8%);
  --radius-sm: 12px;
  --radius: 24px;
  --radius-lg: 30px;
  --brand-hi: #54b7b0;
  --brand-lo: #08716f;
  --hero-from: #6659b8;
  --hero-mid: #0b7774;
  --hero-to: #173234;
  --focus-from: #173234;
  --focus-to: #6659b8;
  --focus-inner: #173234;
  --faith-from: #2b765d;
  --faith-to: #0b7774;
  --font-display: "EOS Quicksand", "Arial Rounded MT Bold", "Avenir Next", sans-serif;
  --font-ui: "EOS Quicksand", "Avenir Next", system-ui, sans-serif;
  --font-data: "EOS Quicksand", "Avenir Next", system-ui, sans-serif;
  --type-display-weight: 650;
  --type-display-tracking: 0;
  --theme-duration: 520ms;
  --theme-focal-duration: 680ms;
  --theme-ease: cubic-bezier(.16, 1, .3, 1);
}

:root[data-theme="cobalt-cut"] {
  color-scheme: light;
  --bg: #eef2fc;
  --bg-deep: #e3eaf7;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-soft: #f7f9fd;
  --surface-raised: #e9effb;
  --ink: #101728;
  --muted-readable: #344057;
  --muted: #59667d;
  --faint: #59667d;
  --line: #e4eaf3;
  --line-strong: #ccd6e6;
  --accent: #0346f3;
  --accent-2: #0038cf;
  --accent-readable: #0038cf;
  --accent-soft: #e9efff;
  --on-accent: #ffffff;
  --mint: #08745b;
  --mint-soft: #e8f7f1;
  --amber: #95520a;
  --amber-soft: #fff3df;
  --coral: #b4233c;
  --coral-soft: #fff0f3;
  --danger: #b4233c;
  --shadow-sm: 0 2px 6px rgb(38 59 105 / 5%);
  --shadow-lg: 0 32px 90px rgb(45 70 137 / 16%);
  --radius-sm: 12px;
  --radius: 22px;
  --radius-lg: 32px;
  --brand-hi: #ffffff;
  --brand-lo: #bed0ff;
  --hero-from: #0038cf;
  --hero-mid: #0346f3;
  --hero-to: #101728;
  --focus-from: #101728;
  --focus-to: #0038cf;
  --focus-inner: #101728;
  --faith-from: #08745b;
  --faith-to: #075c49;
  --font-display: "EOS Archivo Narrow", "Arial Narrow", sans-serif;
  --font-ui: "EOS Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-data: "EOS Archivo", "Helvetica Neue", Arial, sans-serif;
  --type-display-weight: 700;
  --type-display-tracking: -.01em;
  --theme-duration: 280ms;
  --theme-focal-duration: 360ms;
  --theme-ease: cubic-bezier(.23, 1, .32, 1);
}

:root[data-theme="cloudline"] {
  color-scheme: light;
  --bg: #e9edf3;
  --bg-deep: #dce3ed;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-soft: #f5f7fb;
  --surface-raised: #e9eef5;
  --ink: #18233a;
  --muted-readable: #3e4c63;
  --muted: #64748b;
  --faint: #64748b;
  --line: #e5ebf3;
  --line-strong: #d5deea;
  --accent: #155eef;
  --accent-2: #175cd3;
  --accent-readable: #175cd3;
  --accent-soft: #e8f0ff;
  --on-accent: #ffffff;
  --mint: #027a48;
  --mint-soft: #ecfdf3;
  --amber: #a95408;
  --amber-soft: #fff7e1;
  --coral: #b42318;
  --coral-soft: #fef3f2;
  --danger: #b42318;
  --shadow-sm: 0 1px 2px rgb(16 24 40 / 5%);
  --shadow-lg: 0 28px 70px -28px rgb(31 44 76 / 24%), 0 8px 22px rgb(31 44 76 / 6%);
  --radius-sm: 12px;
  --radius: 24px;
  --radius-lg: 32px;
  --brand-hi: #4e82ff;
  --brand-lo: #155eef;
  --hero-from: #175cd3;
  --hero-mid: #155eef;
  --hero-to: #18233a;
  --focus-from: #18233a;
  --focus-to: #175cd3;
  --focus-inner: #18233a;
  --faith-from: #027a48;
  --faith-to: #04623b;
  --font-display: "EOS Varela Round", "Arial Rounded MT Bold", sans-serif;
  --font-ui: "EOS Nunito Sans", "Avenir Next", system-ui, sans-serif;
  --font-data: "EOS Nunito Sans", "Avenir Next", system-ui, sans-serif;
  --type-display-weight: 400;
  --type-display-tracking: -.01em;
  --theme-duration: 360ms;
  --theme-focal-duration: 480ms;
  --theme-ease: cubic-bezier(.22, 1, .36, 1);
}

html { font-synthesis: none; }

body {
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 31rem),
    radial-gradient(circle at 100% 32%, color-mix(in srgb, var(--mint) 8%, transparent), transparent 28rem),
    var(--bg);
  font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  transition: background-color var(--theme-duration, 280ms) var(--theme-ease, ease), color var(--theme-duration, 280ms) var(--theme-ease, ease);
}

:root[data-theme="aurora-mint"] body {
  background:
    radial-gradient(circle at 7% 2%, rgb(84 183 176 / 24%), transparent 31rem),
    radial-gradient(circle at 96% 24%, rgb(102 89 184 / 15%), transparent 29rem),
    radial-gradient(circle at 48% 100%, rgb(255 244 217 / 28%), transparent 34rem),
    var(--bg);
}

:root[data-theme] :is(h1, h2, h3, .brand, .stat-value, .next-title) {
  font-family: var(--font-display, var(--font-ui));
  font-weight: var(--type-display-weight, 700);
  letter-spacing: var(--type-display-tracking, -.02em);
}

:is(.hero-clock, .focus-time, .tuition-slot, .prayer-time, .date-label, .stat-value) {
  font-family: var(--font-data, var(--font-ui));
  font-variant-numeric: tabular-nums;
}

:root[data-theme="nightshift"] :is(button, input, select, textarea) { line-height: 1.3; }
:root[data-theme="aurora-mint"] :is(button, input, select, textarea) { font-weight: 500; }

.app-shell {
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-solid) 40%, transparent);
  box-shadow: var(--shadow-lg);
}

.brand-mark {
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, var(--brand-hi), var(--brand-lo));
}

.nav-button,
.icon-button,
.soft-button,
.text-button,
.primary-button,
.danger-button,
input,
select,
textarea { border-radius: var(--radius-sm); }

.rail-card,
.notice-card,
.settings-row,
.task-row,
.tuition-row { border-radius: var(--radius); }

.hero-card {
  color: var(--hero-text);
  background:
    radial-gradient(circle at 86% 12%, rgb(255 255 255 / 20%), transparent 24%),
    radial-gradient(circle at 68% 100%, color-mix(in srgb, var(--mint) 52%, transparent), transparent 38%),
    linear-gradient(135deg, var(--hero-from) 0%, var(--hero-mid) 46%, var(--hero-to) 100%);
  box-shadow: var(--shadow-lg);
}

.hero-overline { opacity: 1; }
.hero-message { color: var(--hero-text); }
.hero-date { color: var(--hero-text); }
.goal-pill { color: var(--hero-text); }
.goal-pill span { color: var(--hero-text); }

.primary-button,
.quick-add,
.task-check[aria-pressed="true"],
.tuition-day-filter[aria-pressed="true"],
.day-choice[aria-pressed="true"] { color: var(--on-accent); }

.mini-progress span {
  background: linear-gradient(90deg, var(--mint), color-mix(in srgb, var(--mint) 64%, white));
}

.focus-card {
  color: var(--focus-text);
  background:
    radial-gradient(circle at 86% 20%, color-mix(in srgb, var(--focus-ring) 21%, transparent), transparent 25%),
    linear-gradient(145deg, var(--focus-from), var(--focus-to));
  box-shadow: var(--shadow-lg);
}

.focus-card .card-subtitle,
.focus-ring-label,
.focus-controls label { color: var(--focus-text); }

.focus-ring {
  background: conic-gradient(var(--focus-ring) var(--focus-progress), rgb(255 255 255 / 9%) 0);
}

.focus-ring::before { background: var(--focus-inner); }

.focus-controls input:focus {
  border-color: color-mix(in srgb, var(--focus-ring) 76%, transparent);
  outline-color: color-mix(in srgb, var(--focus-ring) 24%, transparent);
}

.preset:hover,
.preset[aria-pressed="true"] {
  background: color-mix(in srgb, var(--focus-ring) 28%, transparent);
  color: var(--focus-text);
}

.focus-actions .primary-button {
  background: var(--focus-text);
  color: var(--focus-inner);
}

.faith-hero {
  color: var(--faith-text);
  background:
    radial-gradient(circle at 90% 10%, rgb(255 255 255 / 8%), transparent 27%),
    linear-gradient(145deg, var(--faith-from), var(--faith-to));
  box-shadow: var(--shadow-lg);
}

.faith-hero p,
.prayer-score span { color: var(--faith-text); }

dialog { border-radius: var(--radius-lg); }

/* Ten-choice theme picker. Selection stays readable and never relies on color alone. */
.theme-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.theme-field legend {
  margin: 0 0 7px 2px;
  padding: 0;
  color: var(--muted-readable);
  font-size: 11px;
  font-weight: 700;
}

.theme-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.theme-choice {
  min-width: 0;
  min-height: 56px;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 17px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 transparent;
  transition:
    transform var(--fast) ease,
    border-color var(--fast) ease,
    background var(--fast) ease,
    box-shadow var(--fast) ease;
}

.theme-choice:hover {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line-strong));
  background: var(--surface-solid);
  transform: translateY(-1px);
}

.theme-choice:active { transform: scale(.985); }

.theme-choice[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--surface-solid);
  box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-sm);
}

.theme-swatch {
  width: 24px;
  height: 24px;
  display: block;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--swatch-bg) 0 48%, var(--swatch) 48% 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%);
}

.theme-choice-name {
  min-width: 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
}

.theme-choice-check {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  opacity: 0;
  transform: scale(.72);
  transition: opacity var(--fast) ease, transform var(--fast) var(--ease-expo);
}

.theme-choice-check .icon { width: 11px; height: 11px; }
.theme-choice[aria-pressed="true"] .theme-choice-check { opacity: 1; transform: scale(1); }
.theme-help { margin-top: 8px; }

.panel:not([hidden]) { animation: dayflow-panel-in var(--theme-duration, 280ms) var(--theme-ease, ease) both; }

@keyframes dayflow-panel-in {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--theme-duration, 280ms);
  animation-timing-function: var(--theme-ease, ease);
}

@media (max-width: 620px) {
  #settingsDialog .dialog-actions {
    position: sticky;
    z-index: 2;
    bottom: -20px;
    margin-inline: -18px;
    margin-bottom: -20px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-solid) 92%, transparent);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
  }
}

@media (max-width: 860px) {
  .app-shell {
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}

@media (prefers-contrast: more) {
  :root[data-mode="light"] {
    --line: color-mix(in srgb, var(--ink) 24%, transparent);
    --line-strong: color-mix(in srgb, var(--ink) 42%, transparent);
  }

  :root[data-mode="dark"] {
    --line: rgb(255 255 255 / 22%);
    --line-strong: rgb(255 255 255 / 38%);
  }

  .theme-choice[aria-pressed="true"] { border-width: 2px; }
}

@media (forced-colors: active) {
  .theme-choice { border: 1px solid ButtonText; }
  .theme-choice[aria-pressed="true"] { border: 3px solid Highlight; }
  .theme-choice-check { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

@media (prefers-reduced-motion: reduce) {
  .panel:not([hidden]) { animation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 1ms; }
}

@media (prefers-reduced-transparency: reduce) {
  #settingsDialog .dialog-actions { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface-solid); }
}