@import "./tokens/colors.css";
@import "./tokens/typography.css";
@import "./tokens/spacing.css";
@import "./tokens/common.css";
@import "./tokens/grid.css";
@import "./flavors.css";

/* Prevent Flash of Unstyled Content (FOUC)
   Hide undefined custom elements until Web Components are registered */
:not(:defined) {
  visibility: hidden;
}

/* Labs Design System - Main CSS */

/* Root/global tokens that are not duplicated live in tokens/common.css;
  main.css focuses on semantic fallbacks and theme classes. */

/* Semantic token fallbacks — these make the system usable without flavor classes
   (keeps sensible defaults for docs / server-rendered pages). */
:root {
  --color-primary: var(--palette-blueberry-500, #2E2B74);
  /* Note: page background is handled by theme/flavor classes.
    Keep neutral, non-opinionated fallbacks out of :root to avoid biasing themes.
    Components should consume `--color-surface` for panel/card surfaces. */
  --color-on-primary: var(--palette-white, #FFFFFF);
  --color-on-background: var(--palette-blueberry-900, #15122B);
  /* Status colors inherit from global tokens in colors.css */
  --color-danger: var(--palette-strawberry-500, #E53935);
}

/* Small semantic helpers used widely in the codebase; keep these as compact helpers */
/* Small semantic helpers moved to tokens/common.css */

/* Minimal shadow tokens used across components */
/* Shadows moved to tokens/common.css */

/* Radius tokens (small contract) */
/* Radius tokens consolidated in tokens/common.css */

/* Theme helpers (fallbacks when theme classes are used without flavor) */
.theme-light {
  --color-primary: var(--palette-blueberry-500, #2E2B74);
  /* Light theme: favor neutral background by default; flavors may override */
  --color-background: var(--palette-neutral-200, #F0F0F4);
  --color-on-primary: var(--palette-white, #FFFFFF);
  --color-on-background: var(--palette-blueberry-900, #15122B);
  /* Status colors inherit from global tokens */
  --color-danger: var(--palette-strawberry-500, #E53935);

  /* Glass/glassmorphism tokens */
  --color-surface-glass: rgba(255, 255, 255, 0.15);
  --color-border-glass: #FFFFFF80;
}

.theme-dark {
  --color-background: #121212;
  --color-on-background: var(--palette-blueberry-100, #C1C1FF);
  --color-primary: #9575CD;
  --color-secondary: #7E57C2;
  --color-primary-darker: #1B1C1F;
  /* Status colors inherit from global tokens */
  --color-danger: #CF6679;
  --color-on-primary: #000000;
  --color-on-success: #FFFFFF;
  /* Removed color-on-error - use global token */
  --color-primary-75: rgba(149, 117, 205, 0.75);
  --color-primary-25: #C193FF40;
  --color-secondary-75: rgba(126, 87, 194, 0.75);
  --color-on-surface-75: rgba(255, 255, 255, 0.75);
  --settings-icon-color: rgba(255, 255, 255, 0.25);

  /* Dark theme hover color tokens */
  --color-hover-light: rgba(255, 255, 255, 0.05);
  --color-hover-medium: rgba(255, 255, 255, 0.1);

  /* Surface container tokens for dark theme */
  --color-surface-container: #2A2A2A;
  --color-surface-container-high: #373737;
  --color-surface-variant: #303030;
  --color-surface-container: #2A2A2A;
  --color-on-surface-variant: rgba(255, 255, 255, 0.65);
  --color-outline-variant: rgba(255, 255, 255, 0.08);

  /* Glass/glassmorphism tokens for dark theme */
  --color-surface-glass: rgba(30, 30, 30, 0.15);
  --color-border-glass: rgba(255, 255, 255, 0.2);
}


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

/* Link styles: use semantic tokens so they adapt to theme/flavor */
a,
a:link,
a:visited {
  color: var(--color-primary);
  text-decoration: underline;
}

a:visited {
  /* Slightly muted visited color but still theme-driven */
  color: color-mix(in srgb, var(--color-primary) 70%, black 30%);
}

a:hover,
a:focus {
  color: color-mix(in srgb, var(--color-primary) 85%, black 15%);
  text-decoration: underline;
}


/* Button styles are now handled in the component for modularity. */

/* === 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: var(--radius-xl, 16px);
  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: var(--radius-full, 9999px);
  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 */

/* Container Layout Patterns */

/* Small utility: app container wrapper that respects the design token for app width */
.app-container {
  max-width: var(--app-container-max, 720px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* Responsive container for mobile-first layouts */
.container-responsive {
  max-width: var(--app-container-max, 720px);
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
}

@media (max-width: var(--container-mobile-breakpoint, 640px)) {
  .container-responsive {
    padding: var(--container-mobile-padding, 12px);
  }
}

/* Full-bleed container pattern - for elements that should span edge-to-edge on mobile */
.container-fullbleed {
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: var(--container-mobile-breakpoint, 640px)) {
  .container-fullbleed {
    margin-left: var(--container-fullbleed-margin, -12px);
    margin-right: var(--container-fullbleed-margin, -12px);
    width: var(--container-fullbleed-width, calc(100% + 24px));
  }
}