/* ── Light theme (default) ────────────────────────────────── */
:root {
  --color-background:                #f9f9fc;
  --color-surface:                   #f9f9fc;
  --color-surface-dim:               #dadadd;
  --color-surface-bright:            #f9f9fc;
  --color-surface-container-lowest:  #ffffff;
  --color-surface-container-low:     #f3f3f6;
  --color-surface-container:         #eeedf0;
  --color-surface-container-high:    #e8e8eb;
  --color-surface-container-highest: #e2e2e5;
  --color-surface-variant:           #e2e2e5;
  --color-on-surface:                #1a1c1e;
  --color-on-surface-variant:        #47464a;
  --color-on-background:             #1a1c1e;
  --color-primary:                   #000000;
  --color-on-primary:                #ffffff;
  --color-primary-container:         #1c1b1d;
  --color-on-primary-container:      #858386;
  --color-primary-fixed:             #e5e1e4;
  --color-primary-fixed-dim:         #c8c6c8;
  --color-on-primary-fixed:          #1c1b1d;
  --color-on-primary-fixed-variant:  #474649;
  --color-secondary:                 #5d5e66;
  --color-secondary-container:       #e3e1ec;
  --color-on-secondary:              #ffffff;
  --color-on-secondary-container:    #63646c;
  --color-tertiary:                  #000000;
  --color-tertiary-container:        #1a1c1d;
  --color-on-tertiary:               #ffffff;
  --color-on-tertiary-container:     #838485;
  --color-on-tertiary-fixed-variant: #454748;
  --color-outline:                   #78767b;
  --color-outline-variant:           #c8c5ca;
  --color-error:                     #ba1a1a;
  --color-error-container:           #ffdad6;
  --color-on-error:                  #ffffff;
  --color-on-error-container:        #93000a;
}

/* ── Dark theme ───────────────────────────────────────────── */
html.dark {
  --color-background:                #131315;
  --color-surface:                   #131315;
  --color-surface-dim:               #131315;
  --color-surface-bright:            #39393b;
  --color-surface-container-lowest:  #0e0e10;
  --color-surface-container-low:     #1c1b1d;
  --color-surface-container:         #201f22;
  --color-surface-container-high:    #2a2a2c;
  --color-surface-container-highest: #353437;
  --color-surface-variant:           #353437;
  --color-on-surface:                #e5e1e4;
  --color-on-surface-variant:        #c4c7c8;
  --color-on-background:             #e5e1e4;
  --color-primary:                   #ffffff;
  --color-on-primary:                #2f3131;
  --color-primary-container:         #e2e2e2;
  --color-on-primary-container:      #636565;
  --color-primary-fixed:             #e2e2e2;
  --color-primary-fixed-dim:         #c6c6c7;
  --color-on-primary-fixed:          #1a1c1c;
  --color-on-primary-fixed-variant:  #454747;
  --color-secondary:                 #c8c5ca;
  --color-secondary-container:       #47464a;
  --color-on-secondary:              #303033;
  --color-on-secondary-container:    #b6b4b8;
  --color-tertiary:                  #ffffff;
  --color-tertiary-container:        #e7e1dd;
  --color-on-tertiary:               #32302d;
  --color-on-tertiary-container:     #676460;
  --color-on-tertiary-fixed-variant: #494643;
  --color-outline:                   #8e9192;
  --color-outline-variant:           #444748;
  --color-error:                     #ffb4ab;
  --color-error-container:           #93000a;
  --color-on-error:                  #690005;
  --color-on-error-container:        #ffdad6;
}

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Geist', sans-serif;
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-on-surface);
  -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 18px;
  line-height: 1;
  vertical-align: middle;
  user-select: none;
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar             { width: 6px; height: 6px; }
::-webkit-scrollbar-track       { background: transparent; }
::-webkit-scrollbar-thumb       { background-color: var(--color-outline-variant); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--color-outline); }

.drawer-scroll::-webkit-scrollbar { width: 4px; }

/* ── Blazor error boundary ────────────────────────────────── */
.blazor-error-boundary {
  background: #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}
.blazor-error-boundary::after { content: "An error has occurred." }