/**
 * Responsive CSS Utilities
 * Uses CSS custom properties updated by ResolutionHelper and DesignTokens
 * 
 * These values are dynamically scaled based on screen resolution (720p baseline)
 * Import this file after styles.css for responsive enhancements
 */

/* ===========================
   Layout Custom Properties
   (Updated by JavaScript)
   =========================== */

:root {
  /* Sidebar dimensions */
  --layout-sidebar-collapsed: 80px;
  --layout-sidebar-expanded: 280px;
  
  /* Content spacing */
  --layout-content-padding: 32px;
  --layout-content-padding-large: 48px;
  --layout-section-spacing: 48px;
  --layout-grid-gap: 16px;
  --layout-max-content-width: 1200px;
  
  /* Typography (scaled dynamically) */
  --font-hero-title: 48px;
  --font-hero-subtitle: 24px;
  --font-section-title: 32px;
  --font-subsection-title: 24px;
  --font-card-title: 20px;
  --font-card-subtitle: 16px;
  --font-body-large: 18px;
  --font-body-regular: 16px;
  --font-body-small: 14px;
  --font-caption: 12px;
  --font-tiny: 10px;
  --line-height-ratio: 1.5;
  
  /* Component dimensions */
  --component-card-width: 280px;
  --component-card-height: 380px;
  --component-card-height-small: 180px;
  --component-card-width-large: 384px;
  --component-card-height-medium: 240px;
  --component-card-width-xlarge: 500px;
  --component-card-height-large: 350px;
  --component-card-width-xxlarge: 600px;
  --component-card-height-xlarge: 400px;
  --component-card-border-radius: 12px;
  --component-card-padding: 16px;
  --component-card-image-height: 200px;
  
  --component-button-height: 48px;
  --component-button-height-small: 40px;
  --component-button-height-large: 56px;
  --component-button-padding: 24px;
  --component-button-border-radius: 8px;

  --component-keyboard-special-key-width: 100px;
  --component-keyboard-width: 340px;
  
  --component-icon-tiny: 12px;
  --component-icon-small: 16px;
  --component-icon-medium: 24px;
  --component-icon-large: 32px;
  --component-icon-x-large: 48px;
  --component-icon-xx-large: 64px;
  
  --component-nav-item-height: 56px;
  --component-nav-icon-size: 24px;
  --component-nav-item-padding: 16px;
  
  --component-controls-height: 120px;
  --component-progress-bar-height: 6px;
  --component-thumbnail-width: 160px;
  --component-thumbnail-height: 90px;
  --component-seek-thumb-size: 20px;
  
  --component-dialog-width: 600px;
  --component-dialog-padding: 32px;
  --component-overlay-border-radius: 16px;
  
  --component-hero-height: 500px;
  --component-hero-content-padding: 48px;
  
  /* Responsive spacing scale */
  --spacing-responsive-xxs: 4px;
  --spacing-responsive-xs: 8px;
  --spacing-responsive-sm: 12px;
  --spacing-responsive-md: 16px;
  --spacing-responsive-lg: 20px;
  --spacing-responsive-xl: 24px;
  --spacing-responsive-xxl: 32px;
  --spacing-responsive-xxxl: 48px;
  --spacing-responsive-xxxxl: 64px;
  --spacing-responsive-xxxxxl: 80px;
}

/* ===========================
   Responsive Typography
   =========================== */

.text-hero-title {
  font-size: var(--font-hero-title);
  line-height: var(--line-height-ratio);
}

.text-hero-subtitle {
  font-size: var(--font-hero-subtitle);
  line-height: var(--line-height-ratio);
}

.text-section-title {
  font-size: var(--font-section-title);
  line-height: var(--line-height-ratio);
}

.text-subsection-title {
  font-size: var(--font-subsection-title);
  line-height: var(--line-height-ratio);
}

.text-card-title {
  font-size: var(--font-card-title);
  line-height: var(--line-height-ratio);
}

.text-card-subtitle {
  font-size: var(--font-card-subtitle);
  line-height: var(--line-height-ratio);
}

.text-body-large {
  font-size: var(--font-body-large);
  line-height: var(--line-height-ratio);
}

.text-body-regular {
  font-size: var(--font-body-regular);
  line-height: var(--line-height-ratio);
}

.text-body-small {
  font-size: var(--font-body-small);
  line-height: var(--line-height-ratio);
}

.text-caption {
  font-size: var(--font-caption);
  line-height: var(--line-height-ratio);
}

.text-tiny {
  font-size: var(--font-tiny);
  line-height: var(--line-height-ratio);
}

/* ===========================
   Responsive Spacing
   =========================== */

/* Gap utilities */
.gap-responsive-xxs { gap: var(--spacing-responsive-xxs); }
.gap-responsive-xs { gap: var(--spacing-responsive-xs); }
.gap-responsive-sm { gap: var(--spacing-responsive-sm); }
.gap-responsive-md { gap: var(--spacing-responsive-md); }
.gap-responsive-lg { gap: var(--spacing-responsive-lg); }
.gap-responsive-xl { gap: var(--spacing-responsive-xl); }
.gap-responsive-xxl { gap: var(--spacing-responsive-xxl); }
.gap-responsive-xxxl { gap: var(--spacing-responsive-xxxl); }

/* Padding utilities */
.padding-responsive-xs { padding: var(--spacing-responsive-xs); }
.padding-responsive-sm { padding: var(--spacing-responsive-sm); }
.padding-responsive-md { padding: var(--spacing-responsive-md); }
.padding-responsive-lg { padding: var(--spacing-responsive-lg); }
.padding-responsive-xl { padding: var(--spacing-responsive-xl); }
.padding-responsive-xxl { padding: var(--spacing-responsive-xxl); }

/* Margin utilities */
.margin-responsive-xs { margin: var(--spacing-responsive-xs); }
.margin-responsive-sm { margin: var(--spacing-responsive-sm); }
.margin-responsive-md { margin: var(--spacing-responsive-md); }
.margin-responsive-lg { margin: var(--spacing-responsive-lg); }
.margin-responsive-xl { margin: var(--spacing-responsive-xl); }
.margin-responsive-xxl { margin: var(--spacing-responsive-xxl); }

/* Margin bottom utilities (common use case) */
.mb-responsive-xs { margin-bottom: var(--spacing-responsive-xs); }
.mb-responsive-sm { margin-bottom: var(--spacing-responsive-sm); }
.mb-responsive-md { margin-bottom: var(--spacing-responsive-md); }
.mb-responsive-lg { margin-bottom: var(--spacing-responsive-lg); }
.mb-responsive-xl { margin-bottom: var(--spacing-responsive-xl); }
.mb-responsive-xxl { margin-bottom: var(--spacing-responsive-xxl); }

/* ===========================
   Responsive Components
   =========================== */

/* Cards */
.responsive-card {
  width: var(--component-card-width);
  height: var(--component-card-height);
  border-radius: var(--component-card-border-radius);
  padding: var(--component-card-padding);
}

.responsive-card-image {
  height: var(--component-card-image-height);
}

/* Buttons */
.responsive-button {
  height: var(--component-button-height);
  padding: 0 var(--component-button-padding);
  border-radius: var(--component-button-border-radius);
}

.responsive-button-small {
  height: var(--component-button-height-small);
  padding: 0 calc(var(--component-button-padding) * 0.75);
  border-radius: var(--component-button-border-radius);
}

.responsive-button-large {
  height: var(--component-button-height-large);
  padding: 0 calc(var(--component-button-padding) * 1.25);
  border-radius: var(--component-button-border-radius);
}

/* Icons */
.responsive-icon-tiny {
  width: var(--component-icon-tiny);
  height: var(--component-icon-tiny);
}

.responsive-icon-small {
  width: var(--component-icon-small);
  height: var(--component-icon-small);
}

.responsive-icon-medium {
  width: var(--component-icon-medium);
  height: var(--component-icon-medium);
}

.responsive-icon-large {
  width: var(--component-icon-large);
  height: var(--component-icon-large);
}

.responsive-icon-x-large {
  width: var(--component-icon-x-large);
  height: var(--component-icon-x-large);
}

/* Navigation */
.responsive-nav-item {
  height: var(--component-nav-item-height);
  padding: 0 var(--component-nav-item-padding);
}

.responsive-nav-icon {
  width: var(--component-nav-icon-size);
  height: var(--component-nav-icon-size);
}

/* ===========================
   Layout Utilities
   =========================== */

.responsive-content-padding {
  padding: var(--layout-content-padding);
}

.responsive-content-padding-large {
  padding: var(--layout-content-padding-large);
}

.responsive-section-spacing {
  margin-bottom: var(--layout-section-spacing);
}

.responsive-grid {
  display: grid;
  gap: var(--layout-grid-gap);
}

.responsive-max-content-width {
  max-width: var(--layout-max-content-width);
  margin-left: auto;
  margin-right: auto;
}

/* ===========================
   Responsive Grid System
   =========================== */

.responsive-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--component-card-width), 1fr));
  gap: var(--layout-grid-gap);
}

.responsive-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--layout-grid-gap);
}

.responsive-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--layout-grid-gap);
}

.responsive-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--layout-grid-gap);
}

/* ===========================
   Resolution-Aware Helpers
   =========================== */

/* Hide/show at different scale factors (added via JS if needed) */
.show-on-large-scale {
  display: none;
}

@media (min-width: 1920px) {
  .show-on-large-scale {
    display: block;
  }
}

/* Clamp utilities for preventing extreme scaling */
.clamp-font-size {
  font-size: clamp(12px, var(--font-body-regular), 32px);
}

.clamp-heading-size {
  font-size: clamp(24px, var(--font-section-title), 64px);
}

/* ===========================
   Smooth Transitions
   =========================== */

.transition-responsive {
  transition: 
    width 0.3s ease,
    height 0.3s ease,
    font-size 0.3s ease,
    padding 0.3s ease,
    margin 0.3s ease;
}

/* ===========================
   Debug Helpers
   =========================== */

/* Add this class to see responsive values in action */
.debug-responsive::after {
  content: 'Scale: ' attr(data-scale);
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(255, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  font-size: 10px;
  font-family: monospace;
  z-index: 9999;
}

/* ===========================
   Notes for Developers
   =========================== */

/*
 * USAGE GUIDELINES:
 * 
 * 1. These CSS variables are updated automatically by DesignTokens.applyResponsiveTokens()
 * 2. Values scale based on screen resolution (720p baseline)
 * 3. At 720p: scale = 1.0x (base values)
 * 4. At 1080p: scale = 1.5x (all values 1.5x larger)
 * 5. At 4K: scale = 3.0x (all values 3x larger)
 * 
 * EXAMPLES:
 * 
 * // Typography
 * <h1 class="text-hero-title">Title</h1>
 * 
 * // Cards
 * <div class="responsive-card">Card content</div>
 * 
 * // Buttons
 * <button class="responsive-button">Click me</button>
 * 
 * // Custom usage
 * .my-component {
 *   padding: var(--spacing-responsive-md);
 *   font-size: var(--font-body-regular);
 * }
 * 
 * // JavaScript usage
 * const cardWidth = getResponsiveToken('components.cardWidth');
 * element.style.width = `${cardWidth}px`;
 */