/**
 * Custom Select Demo - Application Styles
 *
 * This stylesheet handles page layout and global styles.
 * Component-specific styles are in select/select.css.
 */

/* =============================================================================
   EXTERNAL DEPENDENCIES
   ============================================================================= */

/* Open Props provides CSS custom properties for animations */
@import "https://unpkg.com/open-props/easings.min.css";
@import "https://unpkg.com/open-props/durations.min.css";

/* Select component styles */
@import "/select/select.417a0b0a061645df19db.css";

/* =============================================================================
   GLOBAL SETTINGS
   ============================================================================= */

:root {
  /* Enable automatic light/dark mode switching */
  color-scheme: light dark;
}

/* =============================================================================
   PAGE LAYOUT
   ============================================================================= */

body {
  /* Reset */
  margin: 0;
  padding-block: max(100px, 25vh);
  padding-inline: max(50px, 15vw);
  box-sizing: border-box;

  /* Centered column layout for demo */
  display: grid;
  grid-template-columns: repeat(auto-fit, 25ch);
  place-content: center;
  place-items: start;
  gap: 24px;

  /* Full viewport height */
  min-block-size: 100dvb;

  /* Typography */
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 14px;

  /* System colors adapt to color scheme */
  background: light-dark(oklch(98% none none), oklch(10% none none));
  color: CanvasText;
}