@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');

:root,
body.light {
  --primary: #984800;
  --on-primary: #ffffff;
  --primary-container: #ffdbc8;
  --on-primary-container: #321300;
  --secondary: #755846;
  --on-secondary: #ffffff;
  --secondary-container: #ffdbc8;
  --on-secondary-container: #2b1709;
  --tertiary: #616133;
  --on-tertiary: #ffffff;
  --tertiary-container: #e7e5ac;
  --on-tertiary-container: #1d1d00;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #410002;
  --background: #fffbff;
  --on-background: #201a17;
  --surface: #fff8f5;
  --on-surface: #201a17;
  --surface-variant: #f4ded3;
  --on-surface-variant: #52443c;
  --outline: #84746b;
  --outline-variant: #d7c2b8;
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #362f2b;
  --inverse-on-surface: #fbeee9;
  --inverse-primary: #ffb689;
  --surface-dim: #e4d8d2;
  --surface-bright: #fff8f5;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #fef1eb;
  --surface-container: #f8ebe6;
  --surface-container-high: #f2e6e0;
  --surface-container-highest: #ece0da;
}

body.dark {
  --primary: #ffb689;
  --on-primary: #512300;
  --primary-container: #743500;
  --on-primary-container: #ffdbc8;
  --secondary: #e5bfa9;
  --on-secondary: #432b1c;
  --secondary-container: #5c4130;
  --on-secondary-container: #ffdbc8;
  --tertiary: #cbc992;
  --on-tertiary: #323209;
  --tertiary-container: #49491e;
  --on-tertiary-container: #e7e5ac;
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffb4ab;
  --background: #201a17;
  --on-background: #ece0da;
  --surface: #18120f;
  --on-surface: #ece0da;
  --surface-variant: #52443c;
  --on-surface-variant: #d7c2b8;
  --outline: #9f8d83;
  --outline-variant: #52443c;
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #ece0da;
  --inverse-on-surface: #362f2b;
  --inverse-primary: #984800;
  --surface-dim: #18120f;
  --surface-bright: #3f3834;
  --surface-container-lowest: #120d0a;
  --surface-container-low: #201a17;
  --surface-container: #241e1b;
  --surface-container-high: #2f2925;
  --surface-container-highest: #3a3330;
}

html {
  scroll-behavior: smooth;
}

.font-ds {
  font-family: 'Dancing Script', cursive;
}