/* ==========================================================================
   Todix Theme — Clean White Professional
   Mimics premium product configurator style with dark accent borders.
   ========================================================================== */

:root {
  /* Primary accent — dark/black for selection */
  --accent-color: #1a1a1a;

  /* Surface tokens */
  --md3-surface: #ffffff;
  --md3-surface-variant: #f7f7f7;
  --md3-outline: #999999;
  --md3-outline-variant: #e5e5e5;
  --md3-on-surface: #1a1a1a;
  --md3-on-surface-variant: #666666;

  /* Switch */
  --md3-switch-track: #d4d4d4;
  --md3-switch-track-checked: #1a1a1a;
  --md3-switch-thumb: #fff;
  --md3-switch-thumb-checked: #fff;
  --md3-switch-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  --md3-switch-focus: rgba(26, 26, 26, 0.15);
  --md3-switch-disabled: #e5e5e5;
  --md3-switch-ripple: rgba(26, 26, 26, 0.15);

  /* Slider */
  --md3-slider-track: #e5e5e5;
  --md3-slider-track-active: #1a1a1a;
  --md3-slider-thumb: #1a1a1a;
  --md3-slider-thumb-border: #1a1a1a;
  --md3-slider-focus: rgba(26, 26, 26, 0.12);
  --md3-slider-disabled: #d4d4d4;
  --md3-slider-tick: #999;
  --md3-slider-value-bg: #1a1a1a;
  --md3-slider-value-color: #fff;

  /* Swatch */
  --md3-swatch-outline: #1a1a1a;
  --md3-swatch-shadow: none;
  --md3-swatch-selected-shadow: none;
  --md3-swatch-selected-outline: #1a1a1a;
  --md3-swatch-unselected-outline: #e5e5e5;
  --md3-swatch-focus: rgba(26, 26, 26, 0.1);
  --md3-swatch-label: #666666;
  --md3-swatch-label-selected: #1a1a1a;

  /* Base overrides */
  --controls-bg: #ffffff;
  --controls-label: #1a1a1a;
  --border-colour: #ebebeb;
  --highlight-blue: #1a1a1a;
  --header-bg: #ffffff;
}