/**
 * Lets Pop Design System
 * Centralized tokens for typography, colors, spacing, and effects
 * Version: 1.0.0
 */

/* ============================================
   CSS CUSTOM PROPERTIES (TOKENS)
   ============================================ */

:root {
  /* Color tokens → assets/css/theme-tokens.css (dark / light via [data-theme]) */
  --lp-font-bump: 2px;

  /* ------------------------------------------
     TYPOGRAPHY - FONT FAMILIES
     ------------------------------------------ */
  --lp-font-primary: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --lp-font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --lp-font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
  
  /* ------------------------------------------
     TYPOGRAPHY - HEADING SIZES
     ------------------------------------------ */
  --lp-h1-size: clamp(calc(40px + var(--lp-font-bump)), 5vw, calc(72px + var(--lp-font-bump)));
  --lp-h1-line-height: 1.1;
  --lp-h1-weight: 500;
  --lp-h1-letter-spacing: -0.02em;
  
  --lp-h2-size: clamp(calc(32px + var(--lp-font-bump)), 4vw, calc(56px + var(--lp-font-bump)));
  --lp-h2-line-height: 1.15;
  --lp-h2-weight: 500;
  --lp-h2-letter-spacing: -0.01em;
  
  --lp-h3-size: clamp(calc(28px + var(--lp-font-bump)), 3vw, calc(48px + var(--lp-font-bump)));
  --lp-h3-line-height: 1.2;
  --lp-h3-weight: 500;
  --lp-h3-letter-spacing: -0.01em;
  
  --lp-h4-size: clamp(calc(24px + var(--lp-font-bump)), 2.5vw, calc(36px + var(--lp-font-bump)));
  --lp-h4-line-height: 1.25;
  --lp-h4-weight: 500;
  
  --lp-h5-size: clamp(calc(20px + var(--lp-font-bump)), 2vw, calc(28px + var(--lp-font-bump)));
  --lp-h5-line-height: 1.3;
  --lp-h5-weight: 500;
  
  --lp-h6-size: clamp(calc(18px + var(--lp-font-bump)), 1.5vw, calc(24px + var(--lp-font-bump)));
  --lp-h6-line-height: 1.35;
  --lp-h6-weight: 500;
  
  /* ------------------------------------------
     TYPOGRAPHY - BODY TEXT
     ------------------------------------------ */
  --lp-body-large-size: clamp(calc(18px + var(--lp-font-bump)), 1.5vw, calc(22px + var(--lp-font-bump)));
  --lp-body-large-line-height: 1.6;
  
  --lp-body-size: clamp(calc(15px + var(--lp-font-bump)), 1.2vw, calc(18px + var(--lp-font-bump)));
  --lp-body-line-height: 1.7;
  
  --lp-body-small-size: clamp(calc(13px + var(--lp-font-bump)), 1vw, calc(15px + var(--lp-font-bump)));
  --lp-body-small-line-height: 1.6;
  
  --lp-caption-size: calc(12px + var(--lp-font-bump));
  --lp-caption-line-height: 1.5;
  
  /* ------------------------------------------
     TYPOGRAPHY - SPECIAL
     ------------------------------------------ */
  --lp-label-size: calc(14px + var(--lp-font-bump));
  --lp-label-weight: 400;
  --lp-label-letter-spacing: 0;
  
  --lp-link-size: calc(14px + var(--lp-font-bump));
  --lp-link-weight: 500;
  
  --lp-button-size: calc(14px + var(--lp-font-bump));
  --lp-button-weight: 500;
  --lp-button-letter-spacing: 0.02em;
  
  /* ------------------------------------------
     SPACING SCALE
     ------------------------------------------ */
  --lp-space-xs: 4px;
  --lp-space-sm: 8px;
  --lp-space-md: 16px;
  --lp-space-lg: 24px;
  --lp-space-xl: 32px;
  --lp-space-2xl: 48px;
  --lp-space-3xl: 64px;
  --lp-space-4xl: 80px;
  --lp-space-5xl: 120px;
  
  /* ------------------------------------------
     LAYOUT
     ------------------------------------------ */
  --lp-container-max: 1400px;
  --lp-container-wide: 1600px;
  --lp-container-narrow: 900px;
  
  --lp-padding-mobile: 6%;
  --lp-padding-tablet: 8%;
  --lp-padding-desktop: 10%;
  
  --lp-grid-gap-sm: 24px;
  --lp-grid-gap-md: 40px;
  --lp-grid-gap-lg: 60px;
  --lp-grid-gap-xl: 80px;
  
  /* ------------------------------------------
     BORDERS & RADIUS
     ------------------------------------------ */
  --lp-radius-sm: 8px;
  --lp-radius-md: 12px;
  --lp-radius-lg: 16px;
  --lp-radius-xl: 24px;
  --lp-radius-full: 9999px;
  
  --lp-border-width: 1px;
  --lp-border-width-thick: 2px;
  
  /* ------------------------------------------
     SHADOWS
     ------------------------------------------ */
  --lp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --lp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --lp-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.5);
  --lp-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.55);
  
  /* ------------------------------------------
     TRANSITIONS
     ------------------------------------------ */
  --lp-transition-fast: 0.15s ease;
  --lp-transition-base: 0.25s ease;
  --lp-transition-slow: 0.4s ease;
  
  /* ------------------------------------------
     Z-INDEX SCALE
     ------------------------------------------ */
  --lp-z-base: 0;
  --lp-z-dropdown: 100;
  --lp-z-sticky: 200;
  --lp-z-fixed: 300;
  --lp-z-modal-backdrop: 400;
  --lp-z-modal: 500;
  --lp-z-popover: 600;
  --lp-z-tooltip: 700;
}

/* ============================================
   UTILITY CLASSES - QUICK REFERENCE
   ============================================ */

/* Typography Helpers */
.lp-text-h1 { font-size: var(--lp-h1-size); line-height: var(--lp-h1-line-height); font-weight: var(--lp-h1-weight); letter-spacing: var(--lp-h1-letter-spacing); }
.lp-text-h2 { font-size: var(--lp-h2-size); line-height: var(--lp-h2-line-height); font-weight: var(--lp-h2-weight); letter-spacing: var(--lp-h2-letter-spacing); }
.lp-text-h3 { font-size: var(--lp-h3-size); line-height: var(--lp-h3-line-height); font-weight: var(--lp-h3-weight); letter-spacing: var(--lp-h3-letter-spacing); }
.lp-text-h4 { font-size: var(--lp-h4-size); line-height: var(--lp-h4-line-height); font-weight: var(--lp-h4-weight); }
.lp-text-h5 { font-size: var(--lp-h5-size); line-height: var(--lp-h5-line-height); font-weight: var(--lp-h5-weight); }
.lp-text-h6 { font-size: var(--lp-h6-size); line-height: var(--lp-h6-line-height); font-weight: var(--lp-h6-weight); }

.lp-text-body-lg { font-size: var(--lp-body-large-size); line-height: var(--lp-body-large-line-height); }
.lp-text-body { font-size: var(--lp-body-size); line-height: var(--lp-body-line-height); }
.lp-text-body-sm { font-size: var(--lp-body-small-size); line-height: var(--lp-body-small-line-height); }
.lp-text-caption { font-size: var(--lp-caption-size); line-height: var(--lp-caption-line-height); }

.lp-text-label { font-size: var(--lp-label-size); font-weight: var(--lp-label-weight); letter-spacing: var(--lp-label-letter-spacing); }

/* Color Helpers */
.lp-color-primary { color: var(--lp-text-primary); }
.lp-color-secondary { color: var(--lp-text-secondary); }
.lp-color-muted { color: var(--lp-text-muted); }
.lp-color-light { color: var(--lp-text-light); }

/* Background Helpers */
.lp-bg-white { background-color: var(--lp-bg-white); }
.lp-bg-cream { background-color: var(--lp-bg-cream); }
.lp-bg-warm { background-color: var(--lp-bg-warm); }
.lp-bg-beige { background-color: var(--lp-bg-beige); }

/* Spacing Helpers */
.lp-p-0 { padding: 0; }
.lp-p-xs { padding: var(--lp-space-xs); }
.lp-p-sm { padding: var(--lp-space-sm); }
.lp-p-md { padding: var(--lp-space-md); }
.lp-p-lg { padding: var(--lp-space-lg); }
.lp-p-xl { padding: var(--lp-space-xl); }
.lp-p-2xl { padding: var(--lp-space-2xl); }
.lp-p-3xl { padding: var(--lp-space-3xl); }
.lp-p-4xl { padding: var(--lp-space-4xl); }
.lp-p-5xl { padding: var(--lp-space-5xl); }

.lp-m-0 { margin: 0; }
.lp-m-xs { margin: var(--lp-space-xs); }
.lp-m-sm { margin: var(--lp-space-sm); }
.lp-m-md { margin: var(--lp-space-md); }
.lp-m-lg { margin: var(--lp-space-lg); }
.lp-m-xl { margin: var(--lp-space-xl); }

.lp-gap-xs { gap: var(--lp-space-xs); }
.lp-gap-sm { gap: var(--lp-space-sm); }
.lp-gap-md { gap: var(--lp-space-md); }
.lp-gap-lg { gap: var(--lp-space-lg); }
.lp-gap-xl { gap: var(--lp-space-xl); }
.lp-gap-2xl { gap: var(--lp-space-2xl); }

/* Layout Helpers */
.lp-full-width { width: 100%; max-width: none; }
.lp-container { width: 100%; max-width: var(--lp-container-max); margin: 0 auto; }
.lp-container-wide { width: 100%; max-width: var(--lp-container-wide); margin: 0 auto; }
.lp-container-narrow { width: 100%; max-width: var(--lp-container-narrow); margin: 0 auto; }

/* ============================================
   USAGE IN BLOCKS
   ============================================
   
   To use in a block, reference the CSS variables:
   
   .my-block {
     padding: var(--lp-padding-desktop);
     background: var(--lp-bg-white);
   }
   
   .my-block h2 {
     font-size: var(--lp-h2-size);
     color: var(--lp-text-primary);
   }
   
   .my-block p {
     font-size: var(--lp-body-size);
     line-height: var(--lp-body-line-height);
   }
*/