/* Settings window — M3 Expressive styling */
/* Color tokens are set dynamically by src/settings.js to match the main window. */

/* Roboto Flex — variable font, bundled locally */
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('./roboto-flex-nDQikIyu.woff2') format('woff2');
}

/* M3 tokens (theme-independent — color tokens set by JS) */
:root {
  --md-shape-full: 9999px;
  --md-shape-xs: 4px;
  --md-motion-duration-short: 150ms;
  --md-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-motion-easing-spring: cubic-bezier(0.35, 1.5, 0.65, 1);
  --md-elevation-1: 0 1px 3px 1px rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.3);
}

body {
  font-family: 'Roboto Flex', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 0;
  user-select: none;
  overflow: hidden;
  background: var(--md-surface, #f0f0f0);
  color: var(--md-on-surface, #333);
}

#settings-container {
  --settings-input-bg: rgba(0, 0, 0, 0.2);
  --settings-btn-active-color: #000000;
  padding: 0 12px;
}

.theme-light #settings-container {
  --settings-btn-active-color: #ffffff;
}

/* Button styles — mirrors shared/styles.css .scope-btn */
.scope-btn {
  background: #000000;
  border: none;
  border-radius: var(--md-shape-full, 9999px);
  color: var(--md-on-surface);
  padding: 0 16px;
  min-height: 40px;
  font-family: 'Roboto Flex', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--md-motion-duration-short) var(--md-motion-easing-standard),
              color var(--md-motion-duration-short) var(--md-motion-easing-standard);
}

.scope-btn:hover {
  background: var(--md-surface-container-highest);
}

.scope-btn:active {
  background: var(--md-outline-variant);
}

.scope-btn.active {
  background: var(--md-primary);
  color: #000000;
}

.theme-light .scope-btn {
  background: #ffffff;
}

.theme-light .scope-btn:hover {
  background: #f0f0f0;
}

.theme-light .scope-btn:active {
  background: #e4e4e4;
}

.theme-light .scope-btn.active {
  background: var(--md-primary);
  color: #ffffff;
}