@layer primitives {
:where(.ui-button, button) {
  --button-border-color: var(--color-border-button);
  --button-background: var(--gradient-surface-button);
  --button-text-color: var(--color-text-primary);
  --button-shadow: none;
  --button-hover-border-color: var(--color-border-strong);
  --button-hover-text-color: #b8f7ff;
  --button-hover-shadow: var(--shadow-button-hover);
  --button-active-border-color: var(--button-hover-border-color);
  --button-active-background: var(--button-background);
  --button-active-text-color: var(--button-hover-text-color);
  --button-active-shadow: var(--shadow-button-active);
  border: var(--border-width-base) solid var(--button-border-color);
  border-radius: var(--radius-button);
  padding: 0.5rem 0.8rem;
  color: var(--button-text-color);
  background: var(--button-background);
  box-shadow: var(--button-shadow);
  font-family: var(--font-ui);
  cursor: pointer;
  transition:
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    background var(--duration-base) var(--ease-standard);
}

:where(.ui-button:hover, button:hover) {
  border-color: var(--button-hover-border-color);
  color: var(--button-hover-text-color);
  box-shadow: var(--button-hover-shadow);
}

:where(.ui-button:disabled, button:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

:where(.ui-panel, .panel) {
  --panel-border-color: var(--line);
  --panel-background: var(--gradient-surface-panel);
  --panel-shadow: var(--shadow-panel);
  border: var(--border-width-base) solid var(--panel-border-color);
  border-radius: var(--radius-panel);
  padding: 0.72rem;
  background: var(--panel-background);
  box-shadow: var(--panel-shadow);
}

:where(.ui-tooltip, .stat-tooltip) {
  --tooltip-border-color: rgba(102, 168, 211, 0.8);
  --tooltip-background: var(--surface-tooltip);
  --tooltip-text-color: var(--color-text-primary);
  --tooltip-shadow: var(--shadow-tooltip);
  border: var(--border-width-base) solid var(--tooltip-border-color);
  border-radius: var(--radius-tooltip);
  background: var(--tooltip-background);
  color: var(--tooltip-text-color);
  box-shadow: var(--tooltip-shadow);
}

:where(
  .ui-modal-card,
  .settings-modal-card,
  .queue-presets-modal-card,
  .mechanics-modal-card,
  .memory-archive-modal-card
) {
  --modal-card-border-color: var(--color-border-panel-strong);
  --modal-card-background: var(--gradient-surface-modal);
  --modal-card-shadow: var(--shadow-modal);
  border: var(--border-width-base) solid var(--modal-card-border-color);
  border-radius: var(--radius-card);
  background: var(--modal-card-background);
  box-shadow: var(--modal-card-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

:where(
  .ui-modal-header,
  .settings-modal-header,
  .queue-presets-modal-header,
  .mechanics-modal-header,
  .memory-archive-header
) {
  --modal-header-border-color: var(--color-border-header);
  --modal-header-background: var(--gradient-surface-modal-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.86rem 1rem 0.72rem;
  border-bottom: var(--border-width-base) solid var(--modal-header-border-color);
  background: var(--modal-header-background);
}

:where(
  .ui-modal-title,
  .settings-modal-header h2,
  .queue-presets-modal-header h2,
  .mechanics-modal-header h2,
  .memory-archive-header h2
) {
  margin: 0;
  font-size: 0.94rem;
  letter-spacing: 0.14em;
  color: var(--color-text-accent);
  text-shadow: 0 0 10px rgba(88, 219, 255, 0.45);
}

:where(.ui-section-card, .queue-presets-section, .mechanics-section, .memory-archive-entry) {
  --section-border-color: var(--color-border-panel);
  --section-background: var(--gradient-surface-card);
  --section-shadow: var(--shadow-card);
  border: var(--border-width-base) solid var(--section-border-color);
  border-radius: var(--radius-card);
  background: var(--section-background);
  box-shadow: var(--section-shadow);
}

:where(.ui-subcard, .queue-preset-card) {
  --subcard-border-color: var(--color-border-panel);
  --subcard-background: rgba(5, 16, 24, 0.82);
  --subcard-shadow: none;
  border: var(--border-width-base) solid var(--subcard-border-color);
  border-radius: var(--radius-card);
  background: var(--subcard-background);
  box-shadow: var(--subcard-shadow);
}

:where(.ui-tab, .mechanics-tab-btn, .memory-archive-source-tab) {
  --tab-border-color: var(--color-border-tab);
  --tab-background: var(--gradient-surface-tab);
  --tab-text-color: #8ccfe7;
  margin-top: 0;
  border: var(--border-width-base) solid var(--tab-border-color);
  border-radius: var(--radius-button);
  background: var(--tab-background);
  color: var(--tab-text-color);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:where(.ui-tab.is-active, .ui-tab.active, .ui-tab[aria-selected="true"], .mechanics-tab-btn.is-active, .mechanics-tab-btn.active, .mechanics-tab-btn[aria-selected="true"], .memory-archive-source-tab.is-active, .memory-archive-source-tab.active) {
  border-color: var(--color-border-hot);
  color: var(--color-text-accent-strong);
  box-shadow: var(--shadow-button-active);
}

:where(.ui-field, .queue-presets-create-row input, .queue-preset-rename-input) {
  --field-border-color: var(--color-border-field);
  --field-background: var(--surface-field);
  --field-text-color: var(--color-text-bright);
  border: var(--border-width-base) solid var(--field-border-color);
  border-radius: var(--radius-field);
  background: var(--field-background);
  color: var(--field-text-color);
  font-family: var(--font-mono);
}

:where(.ui-shell-card, .pause-menu-card, .new-game-confirm-card, .demo-notice-card, .session-loading-card, .debug-menu, .tutorial-bubble, .tutorial-center-text) {
  --shell-card-border-color: var(--color-border-strong);
  --shell-card-background: var(--gradient-surface-shell);
  --shell-card-shadow: var(--shadow-shell);
  border: var(--border-width-base) solid var(--shell-card-border-color);
  border-radius: var(--radius-card);
  background: var(--shell-card-background);
  box-shadow: var(--shell-card-shadow);
}

:where(.ui-kbd, .pause-menu kbd, .queue-key-hint kbd, .tutorial-queue-icon-box) {
  --kbd-border-color: var(--color-border-strong);
  --kbd-background: var(--surface-kbd);
  --kbd-text-color: var(--color-text-primary);
  --kbd-shadow: var(--shadow-kbd);
  border: var(--border-width-base) solid var(--kbd-border-color);
  border-radius: var(--radius-kbd);
  background: var(--kbd-background);
  color: var(--kbd-text-color);
  box-shadow: var(--kbd-shadow);
}

:where(.ui-status) {
  --status-border-color: var(--color-border-field-soft);
  --status-background: var(--surface-field-muted);
  --status-text-color: var(--color-text-primary);
  border: var(--border-width-base) solid var(--status-border-color);
  border-radius: var(--radius-card);
  background: var(--status-background);
  color: var(--status-text-color);
}

:where(.ui-mono-data, .debug-metric, .combat-stat-value) {
  font-family: var(--font-mono);
}

:where(.ui-chip, .queue-preset-chip) {
  --chip-border-color: var(--color-border-field-soft);
  --chip-background: var(--surface-chip);
  --chip-text-color: var(--color-text-chip);
  border: var(--border-width-base) solid var(--chip-border-color);
  border-radius: var(--radius-pill);
  background: var(--chip-background);
  color: var(--chip-text-color);
}

:where(.ui-scrim, .pause-menu, .new-game-confirm-modal, .demo-notice-modal, .memory-archive-modal, .mechanics-modal, .settings-modal, .queue-presets-modal) {
  --scrim-background: var(--surface-overlay);
  --scrim-blur: 1px;
  background: var(--scrim-background);
  backdrop-filter: blur(var(--scrim-blur));
}

:where(
  .ui-button.is-active,
  button.is-active,
  .ui-button.active,
  button.active,
  .ui-button[aria-pressed="true"],
  button[aria-pressed="true"],
  .ui-button[aria-selected="true"],
  button[aria-selected="true"]
) {
  border-color: var(--button-active-border-color);
  background: var(--button-active-background);
  color: var(--button-active-text-color);
  box-shadow: var(--button-active-shadow);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: var(--color-scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: var(--radius-pill);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--color-scrollbar-thumb-hover);
}
}