:root {
  /* Light */
  --md-sys-color-primary: #9A2B24;            --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #FFDAD5;  --md-sys-color-on-primary-container: #410001;
  --md-sys-color-secondary: #775652;          --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #FFDAD5;--md-sys-color-on-secondary-container: #2C1512;
  --md-sys-color-tertiary: #705D00;           --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FFE086; --md-sys-color-on-tertiary-container: #221B00;
  --md-sys-color-error: #BA1A1A;              --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #410002;
  --md-sys-color-surface: #FFF8F6;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #FFF0EE;
  --md-sys-color-surface-container: #FCEAE7;
  --md-sys-color-surface-container-high: #F6E4E1;
  --md-sys-color-surface-container-highest: #F1DEDC;
  --md-sys-color-on-surface: #231918;         --md-sys-color-on-surface-variant: #534341;
  --md-sys-color-outline: #857370;            --md-sys-color-outline-variant: #D8C2BE;
  --md-sys-color-inverse-surface: #392E2C;    --md-sys-color-inverse-on-surface: #FFEDEA;
  --md-sys-color-inverse-primary: #FFB4AB;
  /* Custom color: ngày tốt */
  --kth-good: #2F6B2C; --kth-good-container: #B5F1A5; --kth-on-good-container: #002200;

  /* Shape */
  --md-sys-shape-corner-extra-small: 4px;  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;      --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px; --md-sys-shape-corner-full: 9999px;

  /* Motion */
  --md-sys-motion-easing-standard: cubic-bezier(.2, 0, 0, 1);
  --md-sys-motion-duration-short4: 200ms;

  /* State layer */
  --md-sys-state-hover: .08; --md-sys-state-focus: .10; --md-sys-state-pressed: .10;

  /* Typeface */
  --md-ref-typeface-brand: 'Noto Serif', Georgia, serif;
  --md-ref-typeface-plain: 'Be Vietnam Pro', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-sys-color-primary: #FFB4AB;            --md-sys-color-on-primary: #690005;
    --md-sys-color-primary-container: #8C1D18;  --md-sys-color-on-primary-container: #FFDAD5;
    --md-sys-color-secondary: #E7BDB7;          --md-sys-color-on-secondary: #442926;
    --md-sys-color-secondary-container: #5D3F3B;--md-sys-color-on-secondary-container: #FFDAD5;
    --md-sys-color-tertiary: #E2C554;           --md-sys-color-on-tertiary: #3A3000;
    --md-sys-color-tertiary-container: #544600; --md-sys-color-on-tertiary-container: #FFE086;
    --md-sys-color-error: #FFB4AB;              --md-sys-color-error-container: #93000A;
    --md-sys-color-on-error-container: #FFDAD6;
    --md-sys-color-surface: #1A1110;
    --md-sys-color-surface-container-lowest: #140C0B;
    --md-sys-color-surface-container-low: #231918;
    --md-sys-color-surface-container: #271D1C;
    --md-sys-color-surface-container-high: #322827;
    --md-sys-color-surface-container-highest: #3D3231;
    --md-sys-color-on-surface: #F1DEDC;         --md-sys-color-on-surface-variant: #D8C2BE;
    --md-sys-color-outline: #A08C89;            --md-sys-color-outline-variant: #534341;
    --md-sys-color-inverse-surface: #F1DEDC;    --md-sys-color-inverse-on-surface: #392E2C;
    --md-sys-color-inverse-primary: #9A2B24;
    --kth-good: #9AD48C; --kth-good-container: #16521A; --kth-on-good-container: #B5F1A5;
  }
}

:root[data-theme="dark"] {
  --md-sys-color-primary: #FFB4AB;            --md-sys-color-on-primary: #690005;
  --md-sys-color-primary-container: #8C1D18;  --md-sys-color-on-primary-container: #FFDAD5;
  --md-sys-color-secondary: #E7BDB7;          --md-sys-color-on-secondary: #442926;
  --md-sys-color-secondary-container: #5D3F3B;--md-sys-color-on-secondary-container: #FFDAD5;
  --md-sys-color-tertiary: #E2C554;           --md-sys-color-on-tertiary: #3A3000;
  --md-sys-color-tertiary-container: #544600; --md-sys-color-on-tertiary-container: #FFE086;
  --md-sys-color-error: #FFB4AB;              --md-sys-color-error-container: #93000A;
  --md-sys-color-on-error-container: #FFDAD6;
  --md-sys-color-surface: #1A1110;
  --md-sys-color-surface-container-lowest: #140C0B;
  --md-sys-color-surface-container-low: #231918;
  --md-sys-color-surface-container: #271D1C;
  --md-sys-color-surface-container-high: #322827;
  --md-sys-color-surface-container-highest: #3D3231;
  --md-sys-color-on-surface: #F1DEDC;         --md-sys-color-on-surface-variant: #D8C2BE;
  --md-sys-color-outline: #A08C89;            --md-sys-color-outline-variant: #534341;
  --md-sys-color-inverse-surface: #F1DEDC;    --md-sys-color-inverse-on-surface: #392E2C;
  --md-sys-color-inverse-primary: #9A2B24;
  --kth-good: #9AD48C; --kth-good-container: #16521A; --kth-on-good-container: #B5F1A5;
}

body {
  margin: 0;
  font-family: var(--md-ref-typeface-plain);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--md-ref-typeface-brand);
  margin-top: 0;
}