/**
 * Responsive Design Tokens
 * @countermeasure/web-components/styles/breakpoints
 *
 * CSS custom properties for responsive design, touch targets,
 * fluid typography, and accessibility preferences.
 */

/* ============================================================================
   BREAKPOINT TOKENS
   ============================================================================ */
:root {
  /* Standard breakpoints (mobile-first) */
  --cmm-breakpoint-xs: 480px;
  --cmm-breakpoint-sm: 640px;
  --cmm-breakpoint-md: 768px;
  --cmm-breakpoint-lg: 1024px;
  --cmm-breakpoint-xl: 1280px;
  --cmm-breakpoint-2xl: 1536px;

  /* Touch target sizing (WCAG 2.5.5 - 44x44px minimum) */
  --cmm-touch-target-min: 44px;
  --cmm-touch-target-comfortable: 48px;
  --cmm-touch-target-large: 56px;

  /* Touch-friendly spacing */
  --cmm-spacing-touch: 12px;
  --cmm-spacing-touch-compact: 8px;
  --cmm-spacing-touch-comfortable: 16px;

  /* Fluid typography using clamp() */
  --cmm-font-fluid-xs: clamp(0.625rem, 0.6rem + 0.15vw, 0.75rem);
  --cmm-font-fluid-sm: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  --cmm-font-fluid-base: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
  --cmm-font-fluid-lg: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
  --cmm-font-fluid-xl: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
  --cmm-font-fluid-2xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --cmm-font-fluid-3xl: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem);
  --cmm-font-fluid-4xl: clamp(1.875rem, 1.5rem + 1vw, 2.25rem);

  /* Fluid spacing */
  --cmm-space-fluid-1: clamp(0.25rem, 0.2rem + 0.1vw, 0.375rem);
  --cmm-space-fluid-2: clamp(0.5rem, 0.4rem + 0.2vw, 0.75rem);
  --cmm-space-fluid-3: clamp(0.75rem, 0.6rem + 0.3vw, 1rem);
  --cmm-space-fluid-4: clamp(1rem, 0.8rem + 0.5vw, 1.5rem);
  --cmm-space-fluid-5: clamp(1.5rem, 1.2rem + 0.75vw, 2rem);
  --cmm-space-fluid-6: clamp(2rem, 1.5rem + 1vw, 3rem);

  /* Container width tokens */
  --cmm-container-xs: 20rem;
  --cmm-container-sm: 24rem;
  --cmm-container-md: 28rem;
  --cmm-container-lg: 32rem;
  --cmm-container-xl: 36rem;
  --cmm-container-2xl: 42rem;
  --cmm-container-3xl: 48rem;
  --cmm-container-4xl: 56rem;
  --cmm-container-5xl: 64rem;
  --cmm-container-6xl: 72rem;
  --cmm-container-7xl: 80rem;
  --cmm-container-full: 100%;

  /* Animation timing that respects preferences */
  --cmm-duration-instant: 0ms;
  --cmm-duration-fast: 100ms;
  --cmm-duration-normal: 200ms;
  --cmm-duration-slow: 300ms;
  --cmm-duration-slower: 500ms;

  /* Focus ring styling */
  --cmm-focus-ring-width: 2px;
  --cmm-focus-ring-offset: 2px;
  --cmm-focus-ring-color: hsl(var(--focus-ring));
}

/* ============================================================================
   REDUCED MOTION PREFERENCES
   ============================================================================ */

/**
 * Respect user's motion preferences (WCAG 2.3.3)
 * Reduces all animations to minimal/instant transitions
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  :root {
    --cmm-duration-instant: 0ms;
    --cmm-duration-fast: 0ms;
    --cmm-duration-normal: 0ms;
    --cmm-duration-slow: 0ms;
    --cmm-duration-slower: 0ms;
  }
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

/**
 * Enhanced focus visibility and borders for high contrast mode
 */
@media (prefers-contrast: more) {
  :root {
    --cmm-focus-ring-width: 3px;
    --cmm-focus-ring-offset: 3px;
  }

  /* Ensure all interactive elements have visible borders */
  button,
  input,
  select,
  textarea,
  [role="button"],
  [role="link"],
  [tabindex]:not([tabindex="-1"]) {
    outline: 2px solid currentColor !important;
    outline-offset: 2px !important;
  }
}

/* ============================================================================
   COLOR SCHEME PREFERENCES
   ============================================================================ */

/**
 * Automatic dark mode based on system preference
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  }
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
  }
}

/* ============================================================================
   SCREEN READER ONLY UTILITY
   ============================================================================ */

/**
 * Visually hidden but accessible to screen readers
 */
.cmm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/**
 * Show element when focused (skip links, etc.)
 */
.cmm-sr-only-focusable:focus,
.cmm-sr-only-focusable:focus-within {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ============================================================================
   TOUCH TARGET UTILITIES
   ============================================================================ */

/**
 * Ensure minimum touch target size (WCAG 2.5.5)
 */
.cmm-touch-target {
  position: relative;
  min-width: var(--cmm-touch-target-min);
  min-height: var(--cmm-touch-target-min);
}

/**
 * Expand touch target without affecting visual layout
 */
.cmm-touch-target-expand::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, var(--cmm-touch-target-min));
  height: max(100%, var(--cmm-touch-target-min));
}

/* ============================================================================
   FOCUS VISIBLE STYLES
   ============================================================================ */

/**
 * Focus ring for keyboard navigation
 */
.cmm-focus-ring:focus-visible {
  outline: var(--cmm-focus-ring-width) solid var(--cmm-focus-ring-color);
  outline-offset: var(--cmm-focus-ring-offset);
}

/**
 * Remove default focus outline when using custom focus ring
 */
.cmm-focus-ring:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================================
   RESPONSIVE CONTAINER QUERIES
   ============================================================================ */

/**
 * Container query context
 */
.cmm-container {
  container-type: inline-size;
}

.cmm-container-named {
  container-type: inline-size;
  container-name: var(--cmm-container-name);
}

/* ============================================================================
   RESPONSIVE BREAKPOINT UTILITIES
   ============================================================================ */

/**
 * Mobile-first responsive visibility utilities
 * Use these for progressive enhancement
 */

/* Hide on mobile, show on larger screens */
.cmm-hidden-mobile {
  display: none;
}

@media (min-width: 640px) {
  .cmm-hidden-mobile {
    display: initial;
  }
}

/* Show on mobile only */
.cmm-show-mobile {
  display: initial;
}

@media (min-width: 640px) {
  .cmm-show-mobile {
    display: none;
  }
}

/* Hide on tablet and below */
.cmm-hidden-tablet {
  display: none;
}

@media (min-width: 1024px) {
  .cmm-hidden-tablet {
    display: initial;
  }
}

/* ============================================================================
   RESPONSIVE TYPOGRAPHY
   ============================================================================ */

/**
 * Fluid text size utilities
 */
.cmm-text-fluid-xs { font-size: var(--cmm-font-fluid-xs); }
.cmm-text-fluid-sm { font-size: var(--cmm-font-fluid-sm); }
.cmm-text-fluid-base { font-size: var(--cmm-font-fluid-base); }
.cmm-text-fluid-lg { font-size: var(--cmm-font-fluid-lg); }
.cmm-text-fluid-xl { font-size: var(--cmm-font-fluid-xl); }
.cmm-text-fluid-2xl { font-size: var(--cmm-font-fluid-2xl); }
.cmm-text-fluid-3xl { font-size: var(--cmm-font-fluid-3xl); }
.cmm-text-fluid-4xl { font-size: var(--cmm-font-fluid-4xl); }

/* ============================================================================
   SAFE AREA INSETS (Notched Devices)
   ============================================================================ */

/**
 * Safe area padding for notched devices
 */
.cmm-safe-area-inset {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

.cmm-safe-area-inset-top {
  padding-top: env(safe-area-inset-top);
}

.cmm-safe-area-inset-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
  /* Hide interactive elements */
  button:not(.cmm-print-visible),
  [role="button"]:not(.cmm-print-visible),
  .cmm-no-print {
    display: none !important;
  }

  /* Ensure readable colors */
  * {
    color: #000 !important;
    background: #fff !important;
  }

  /* Show URLs for links */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}
