/* Material Design 3 dark baseline tokens, amber/yellow accent */
:root {
  --md-primary: #f4c430;
  --md-on-primary: #3f2e00;
  --md-primary-container: #5c4400;
  --md-on-primary-container: #ffdf9b;
  --md-secondary-container: #4d4636;
  --md-on-secondary-container: #f2e0bb;
  --md-surface: #15130f;
  --md-surface-container-low: #1e1c16;
  --md-surface-container: #221f19;
  --md-surface-container-high: #2c2921;
  --md-surface-container-highest: #37332a;
  --md-on-surface: #e9e3d8;
  --md-on-surface-variant: #cbc4b3;
  --md-outline: #948d7c;
  --md-outline-variant: #4a4638;
  --md-success: #7ee787;

  --md-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-elevation-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);

  --topbar-height: 72px;

  --scrollbar-thumb: rgba(203, 196, 179, 0.28);
  --scrollbar-thumb-hover: var(--md-primary);

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Scrollbars: thin, in the theme's colors instead of the browser's light default.
   Chrome/Edge/Safari use the ::-webkit-scrollbar rules (rounded thumb, amber on
   hover); Firefox has only the standard properties, so they are applied there
   alone — in Chrome they would switch the webkit styling off. */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
  }
}