/* Basecoat Design System - Extracted from Streamer Theme */

/* Typography */
:root {
  --font-sans: "Inter", sans-serif;
  --font-display: "InterDisplay", sans-serif;
  --font-display--font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  --font-display--font-variation-settings: "opsz" 32;
}

/* Colors - Accent */
:root {
  --color-accent-50: oklch(0.967 0.112 115.3);
  --color-accent-100: oklch(0.945 0.187 115.6);
  --color-accent-200: oklch(0.855 0.169 115.68);
  --color-accent-300: oklch(0.769 0.152 115.72);
  --color-accent-400: oklch(0.674 0.133 115.85);
  --color-accent-500: oklch(0.589 0.117 115.85);
  --color-accent-600: oklch(0.495 0.097 115.28);
  --color-accent-700: oklch(0.409 0.08 115.01);
  --color-accent-800: oklch(0.315 0.062 114.59);
  --color-accent-900: oklch(0.229 0.045 115.18);
  --color-accent-950: oklch(0.175 0.034 114.88);
  
  /* Base */
  --color-base-50: oklch(0.956 0.003 49.05);
  --color-base-100: oklch(0.914 0.005 67.79);
  --color-base-200: oklch(0.82 0.013 56.25);
  --color-base-300: oklch(0.735 0.015 57.53);
  --color-base-400: oklch(0.639 0.013 59.47);
  --color-base-500: oklch(0.553 0.012 58.09);
  --color-base-600: oklch(0.465 0.01 56.16);
  --color-base-700: oklch(0.389 0.009 67.57);
  --color-base-800: oklch(0.303 0.007 67.57);
  --color-base-900: oklch(0.224 0.005 67.57);
  --color-base-950: oklch(0.178 0.004 84.57);
  
  /* Beige */
  --color-beige: oklch(0.968 0.01 81.76);
}

/* Selection */
::selection {
  background-color: var(--color-accent-500);
  color: var(--color-base-900);
}

/* Basecoat Utility Classes */
.basecoat-container-standard {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

.basecoat-container-fullWidth {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.basecoat-container-prose {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Typography Variants */
.basecoat-text-display6XL {
  font-size: 2.25rem;
}

@media (min-width: 640px) {
  .basecoat-text-display6XL {
    font-size: 4.5rem;
  }
}

@media (min-width: 768px) {
  .basecoat-text-display6XL {
    font-size: 6rem;
  }
}

@media (min-width: 1024px) {
  .basecoat-text-display6XL {
    font-size: 12rem;
  }
}

.basecoat-text-display5XL {
  font-size: 2.25rem;
}

@media (min-width: 640px) {
  .basecoat-text-display5XL {
    font-size: 4.5rem;
  }
}

@media (min-width: 768px) {
  .basecoat-text-display5XL {
    font-size: 5rem;
  }
}

@media (min-width: 1024px) {
  .basecoat-text-display5XL {
    font-size: 10rem;
  }
}

.basecoat-text-display4XL {
  font-size: 2.25rem;
}

@media (min-width: 640px) {
  .basecoat-text-display4XL {
    font-size: 4.5rem;
  }
}

@media (min-width: 768px) {
  .basecoat-text-display4XL {
    font-size: 5rem;
  }
}

@media (min-width: 1024px) {
  .basecoat-text-display4XL {
    font-size: 6rem;
  }
}

.basecoat-text-display3XL {
  font-size: 3rem;
}

@media (min-width: 640px) {
  .basecoat-text-display3XL {
    font-size: 3.75rem;
  }
}

@media (min-width: 768px) {
  .basecoat-text-display3XL {
    font-size: 4.5rem;
  }
}

@media (min-width: 1024px) {
  .basecoat-text-display3XL {
    font-size: 5rem;
  }
}

.basecoat-text-display2XL {
  font-size: 3rem;
}

@media (min-width: 640px) {
  .basecoat-text-display2XL {
    font-size: 3rem;
  }
}

@media (min-width: 768px) {
  .basecoat-text-display2XL {
    font-size: 3.75rem;
  }
}

@media (min-width: 1024px) {
  .basecoat-text-display2XL {
    font-size: 4.5rem;
  }
}

.basecoat-text-displayXL {
  font-size: 2.25rem;
}

@media (min-width: 640px) {
  .basecoat-text-displayXL {
    font-size: 2.25rem;
  }
}

@media (min-width: 768px) {
  .basecoat-text-displayXL {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  .basecoat-text-displayXL {
    font-size: 3.75rem;
  }
}

.basecoat-text-displayLG {
  font-size: 1.875rem;
}

@media (min-width: 640px) {
  .basecoat-text-displayLG {
    font-size: 1.875rem;
  }
}

@media (min-width: 768px) {
  .basecoat-text-displayLG {
    font-size: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .basecoat-text-displayLG {
    font-size: 3rem;
  }
}

.basecoat-text-displayMD {
  font-size: 1.5rem;
}

@media (min-width: 640px) {
  .basecoat-text-displayMD {
    font-size: 1.5rem;
  }
}

@media (min-width: 768px) {
  .basecoat-text-displayMD {
    font-size: 1.875rem;
  }
}

@media (min-width: 1024px) {
  .basecoat-text-displayMD {
    font-size: 2.25rem;
  }
}

.basecoat-text-displaySM {
  font-size: 1.125rem;
}

@media (min-width: 640px) {
  .basecoat-text-displaySM {
    font-size: 1.25rem;
  }
}

@media (min-width: 768px) {
  .basecoat-text-displaySM {
    font-size: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .basecoat-text-displaySM {
    font-size: 1.875rem;
  }
}

.basecoat-text-displayXS {
  font-size: 1rem;
}

@media (min-width: 640px) {
  .basecoat-text-displayXS {
    font-size: 1.125rem;
  }
}

@media (min-width: 768px) {
  .basecoat-text-displayXS {
    font-size: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .basecoat-text-displayXS {
    font-size: 1.5rem;
  }
}

.basecoat-text-textXL {
  font-size: 1.125rem;
}

@media (min-width: 640px) {
  .basecoat-text-textXL {
    font-size: 1.25rem;
  }
}

@media (min-width: 768px) {
  .basecoat-text-textXL {
    font-size: 1.5rem;
  }
}

.basecoat-text-textLG {
  font-size: 1rem;
}

@media (min-width: 640px) {
  .basecoat-text-textLG {
    font-size: 1.125rem;
  }
}

@media (min-width: 768px) {
  .basecoat-text-textLG {
    font-size: 1.25rem;
  }
}

.basecoat-text-textBase {
  font-size: 1rem;
}

.basecoat-text-textSM {
  font-size: 0.875rem;
}

.basecoat-text-textXS {
  font-size: 0.75rem;
}

/* Button Variants */
.basecoat-button {
  display: flex;
  text-align: center;
  justify-content: center;
  font-weight: 500;
  align-items: center;
  transition: all 0.5s ease-in-out;
  outline: none;
  cursor: pointer;
}

.basecoat-button:focus {
  outline: 2px solid;
  outline-offset: 2px;
}

.basecoat-button-default {
  color: white;
  background-color: var(--color-base-900);
}

.basecoat-button-default:hover {
  background-color: var(--color-base-900);
}

.basecoat-button-default:focus {
  outline-color: var(--color-base-900);
}

.basecoat-button-accent {
  color: white;
  background-color: var(--color-accent-500);
}

.basecoat-button-accent:hover {
  background-color: var(--color-accent-600);
}

.basecoat-button-accent:focus {
  outline-color: var(--color-accent-500);
}

.basecoat-button-muted {
  color: var(--color-base-900);
  background-color: var(--color-base-100);
}

.basecoat-button-muted:hover {
  background-color: var(--color-base-200);
}

.basecoat-button-muted:focus {
  outline-color: var(--color-base-100);
}

/* Button Sizes */
.basecoat-button-xxs {
  height: 1.875rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.75rem;
}

.basecoat-button-xs {
  height: 2.25rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.75rem;
}

.basecoat-button-sm {
  height: 2.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
}

.basecoat-button-base {
  height: 2.75rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 1rem;
}

.basecoat-button-md {
  height: 3rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 1.125rem;
}

.basecoat-button-lg {
  height: 3.25rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 1.125rem;
}

.basecoat-button-xl {
  height: 3.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 1rem;
}

/* Gap Sizes */
.basecoat-button-gap-xs {
  gap: 0.5rem;
}

.basecoat-button-gap-sm {
  gap: 1rem;
}

.basecoat-button-gap-base {
  gap: 2rem;
}

.basecoat-button-gap-md {
  gap: 2.5rem;
}

.basecoat-button-gap-lg {
  gap: 3rem;
}

/* Navigation Specific Styles */
.hover\:blur-xs:hover {
  filter: blur(2px);
}

/* Details/Summary Dropdown Enhancement */
details summary {
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

details[open] > summary + * {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Navigation z-index management */
#navigation {
  z-index: 50;
}

details > div {
  z-index: 100;
}