/* Material Design 3 dark theme — purple/teal palette */
:root {
  --md-primary:                    #80CBC4;
  --md-on-primary:                 #003731;
  --md-primary-container:          #005049;
  --md-on-primary-container:       #9FF0E9;

  --md-secondary:                  #B0CCC8;
  --md-on-secondary:               #1B3530;
  --md-secondary-container:        #324B47;
  --md-on-secondary-container:     #CCE8E4;

  --md-surface:                    #141020;
  --md-surface-dim:                #141020;
  --md-surface-bright:             #3A3644;
  --md-surface-container-lowest:   #0F0B1A;
  --md-surface-container-low:      #1C1829;
  --md-surface-container:          #211D2E;
  --md-surface-container-high:     #2C2739;
  --md-surface-container-highest:  #373244;

  --md-on-surface:                 #E8E0F0;
  --md-on-surface-variant:         #CAC4D6;

  --md-outline:                    #958EA0;
  --md-outline-variant:            #4A4358;

  --md-error:                      #FFB4AB;
  --md-on-error:                   #690005;
  --md-error-container:            #93000A;
  --md-on-error-container:         #FFB4AB;

  /* JS compatibility aliases (used by showQueriedOptions & parseColor) */
  --borderColor:          var(--md-primary);
  --textColor:            var(--md-on-surface);
  --backgroundColorMain:  var(--md-surface);
  --backgroundColor:      var(--md-surface-container);
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: var(--md-surface);
  color: var(--md-on-surface);
  font-family: Roboto, sans-serif;
  caret-color: var(--md-primary);
}

.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}