:root {
  color-scheme: light;
  --theme-icon-light-display: none;
  --theme-icon-dark-display: block;
  --background: #f4f7f9;
  --foreground: #14211f;
  --surface: #ffffff;
  --surface-muted: #eef5ef;
  --surface-elevated: #ffffff;
  --border: #73867d;
  --muted: #52635b;
  --primary: #0f766e;
  --primary-hover: #0b655e;
  --primary-foreground: #ffffff;
  --link: #0b655e;
  --visited: #684784;
  --focus: #0f766e;
  --placeholder: #52635b;
  --disabled: #e2e9e5;
  --disabled-text: #52635b;
  --status-surface: #e2f3e8;
  --status-text: #20543a;
  --error-surface: #fff0eb;
  --error-text: #7b3426;
  --error-border: #b44832;
  --warning-surface: #fff2d4;
  --warning-text: #734700;
  --sky-soft: #d7eef2;
  --sky-text: #164e63;
  --mint-soft: #dff2e8;
  --mint-text: #0b4f49;
  --coral: #ae4431;
  --coral-hover: #963b2a;
  --coral-foreground: #ffffff;
  --sun: #ffcf59;
  --sun-text: #17382e;
  --scrim: #061b14b3;
  --shadow: 0 12px 32px #14211f14;
  --message-self: #175c4b;
  --message-self-text: #ffffff;
  --message-self-muted: #d0e9df;
  --hero-control-surface: #17382e;
  --hero-control-text: #ffffff;
  --font-sans: Arial, "Noto Sans", "Noto Sans Thai", Tahoma, sans-serif;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --theme-icon-light-display: block;
  --theme-icon-dark-display: none;
  --background: #101b18;
  --foreground: #edf5f1;
  --surface: #182822;
  --surface-muted: #223831;
  --surface-elevated: #294239;
  --border: #7c998b;
  --muted: #b3c4bc;
  --primary: #67d7bf;
  --primary-hover: #94e5d2;
  --primary-foreground: #102a22;
  --link: #87dfcc;
  --visited: #d4b8f0;
  --focus: #94e5d2;
  --placeholder: #b3c4bc;
  --disabled: #2c4239;
  --disabled-text: #b3c4bc;
  --status-surface: #224636;
  --status-text: #bcf0ce;
  --error-surface: #432d29;
  --error-text: #ffbbae;
  --error-border: #dc9b8d;
  --warning-surface: #463919;
  --warning-text: #ffe0a0;
  --sky-soft: #234451;
  --sky-text: #c3eaf6;
  --mint-soft: #274339;
  --mint-text: #b9ead6;
  --coral: #ffb49e;
  --coral-hover: #ffceb9;
  --coral-foreground: #402017;
  --sun: #ffcf59;
  --sun-text: #17382e;
  --scrim: #000000c4;
  --shadow: 0 12px 32px #00000052;
}

/* System fallback when scripts are unavailable. Keep equal to the dark block. */
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]):not([data-theme="dark"]) {
  color-scheme: dark;
  --theme-icon-light-display: block;
  --theme-icon-dark-display: none;
  --background: #101b18;
  --foreground: #edf5f1;
  --surface: #182822;
  --surface-muted: #223831;
  --surface-elevated: #294239;
  --border: #7c998b;
  --muted: #b3c4bc;
  --primary: #67d7bf;
  --primary-hover: #94e5d2;
  --primary-foreground: #102a22;
  --link: #87dfcc;
  --visited: #d4b8f0;
  --focus: #94e5d2;
  --placeholder: #b3c4bc;
  --disabled: #2c4239;
  --disabled-text: #b3c4bc;
  --status-surface: #224636;
  --status-text: #bcf0ce;
  --error-surface: #432d29;
  --error-text: #ffbbae;
  --error-border: #dc9b8d;
  --warning-surface: #463919;
  --warning-text: #ffe0a0;
  --sky-soft: #234451;
  --sky-text: #c3eaf6;
  --mint-soft: #274339;
  --mint-text: #b9ead6;
  --coral: #ffb49e;
  --coral-hover: #ffceb9;
  --coral-foreground: #402017;
  --sun: #ffcf59;
  --sun-text: #17382e;
  --scrim: #000000c4;
  --shadow: 0 12px 32px #00000052;
}
}