@import "./tokens/colors.css";
@import "./tokens/typography.css";
@import "./tokens/spacing.css";

/* Labs Design System - Main CSS */

:root {
  --font-family-base: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --color-overlay-background: rgba(0, 0, 0, 0.5);
  --shadow-overlay: 0 5px 20px rgba(0, 0, 0, 0.2);
}

body {
  font-family: var(--font-family-base);
  background: var(--color-background);
  color: var(--color-on-background);
  margin: 0;
  padding: 0;
}

.button {
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 2.5rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
  cursor: pointer;
  padding: 0.75rem 1.5rem;
  transition:
    background 0.2s,
    transform 0.1s;
}

.button:active {
  background: var(--color-secondary);
  transform: scale(0.97);
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* === Settings Overlay Styles === */

.settings-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-overlay-background);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: opacity 0.3s ease;
}

.settings-overlay.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.settings-overlay .overlay-content {
  background-color: var(--color-surface);
  padding: 20px;
  border-radius: 12px;
  box-shadow: var(--shadow-overlay);
  width: 90%;
  max-width: 400px;
  position: relative;
  margin: auto;
  max-height: 80dvh;
  overflow-y: auto;
  overflow-x: hidden;
  transition: all 0.3s ease-out;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.overlay-header h2 {
  margin: 0;
  font-size: var(--font-size-display);
  color: var(--color-on-surface);
}

.close-button {
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.2s;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.close-button:hover {
  background-color: var(--color-primary-25);
}

.close-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

body.dark-mode .close-icon {
  filter: invert(1);
}

/* === Container Button System === */
/* Container buttons are now fully modular - all styling handled in component */

/* Button container spacing */
.button-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}