/**
 * Luxury Jewelry Catalog — Design System
 *
 * Core tokens, typography, spacing, and glassmorphism specification.
 * All values use CSS custom properties overridable from admin settings.
 * These are the shipped defaults from Section 1 of the spec.
 *
 * @package LuxuryJewelryCatalog
 * @since   1.0.0
 */

/* =========================================================================
   1. CSS Custom Properties (Design Tokens)
   ========================================================================= */

.ljc-catalog-wrapper {
  /* Colors — overridden by inline style from PHP/admin settings */
  --ljc-bg-base: #FFFFFF;
  --ljc-bg-warm: #FCFAF7;
  --ljc-text-primary: #3A322C;
  --ljc-text-secondary: #8A7F72;
  --ljc-accent-primary: #D9B983;
  --ljc-accent-secondary: #B79173;
  --ljc-blush-stone: #F6EEE4;
  --ljc-hairline: #E9E1D4;

  /* Glass panel surface */
  --ljc-glass-bg: rgba(255, 255, 255, 0.65);
  --ljc-glass-border: rgba(255, 255, 255, 0.9);
  --ljc-glass-blur: 20px;
  --ljc-glass-shadow: 0 8px 32px rgba(58, 50, 44, 0.08);

  /* Typography */
  --ljc-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ljc-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ljc-font-mono: 'IBM Plex Mono', 'SF Mono', 'Cascadia Mono', 'Consolas', monospace;

  /* Fluid Type Scale (display / heading / body / caption) */
  --ljc-type-display: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  --ljc-type-heading: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
  --ljc-type-subheading: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  --ljc-type-body: clamp(0.875rem, 0.825rem + 0.2vw, 1rem);
  --ljc-type-caption: clamp(0.75rem, 0.7rem + 0.15vw, 0.8125rem);
  --ljc-type-micro: clamp(0.625rem, 0.6rem + 0.1vw, 0.6875rem);

  /* Font weights */
  --ljc-weight-light: 300;
  --ljc-weight-regular: 400;
  --ljc-weight-medium: 500;
  --ljc-weight-semibold: 600;

  /* 8px Spacing Grid */
  --ljc-space-1: 0.25rem;   /* 4px */
  --ljc-space-2: 0.5rem;    /* 8px */
  --ljc-space-3: 0.75rem;   /* 12px */
  --ljc-space-4: 1rem;      /* 16px */
  --ljc-space-5: 1.5rem;    /* 24px */
  --ljc-space-6: 2rem;      /* 32px */
  --ljc-space-7: 2.5rem;    /* 40px */
  --ljc-space-8: 3rem;      /* 48px */
  --ljc-space-9: 4rem;      /* 64px */
  --ljc-space-10: 5rem;     /* 80px */

  /* Border radius */
  --ljc-radius-sm: 8px;
  --ljc-radius-md: 12px;
  --ljc-radius-lg: 16px;
  --ljc-radius-xl: 24px;
  --ljc-radius-full: 9999px;

  /* Transitions */
  --ljc-transition-fast: 150ms ease;
  --ljc-transition-base: 250ms ease;
  --ljc-transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Grid — cols are set by PHP dynamic CSS on .ljc-catalog-wrapper */
  --ljc-grid-gap: var(--ljc-space-4);

  /* Z-index scale */
  --ljc-z-header: 10000;
  --ljc-z-overlay: 99990;
  --ljc-z-filter: 99995;
  --ljc-z-modal: 99999;
  --ljc-z-toast: 100000;
}

/* Lock page background scroll when overlays/modals are active */
body.ljc-no-scroll {
  overflow: hidden !important;
}

/* =========================================================================
   2. Base Styles
   ========================================================================= */

.ljc-catalog-wrapper {
  font-family: var(--ljc-font-body);
  font-size: var(--ljc-type-body);
  font-weight: var(--ljc-weight-regular);
  line-height: 1.6;
  color: var(--ljc-text-primary);
  background-color: var(--ljc-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

.ljc-catalog-wrapper *,
.ljc-catalog-wrapper *::before,
.ljc-catalog-wrapper *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* =========================================================================
   3. Typography Classes
   ========================================================================= */

.ljc-type-display {
  font-family: var(--ljc-font-display);
  font-size: var(--ljc-type-display);
  font-weight: var(--ljc-weight-light);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ljc-text-primary);
}

.ljc-type-heading {
  font-family: var(--ljc-font-display);
  font-size: var(--ljc-type-heading);
  font-weight: var(--ljc-weight-regular);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ljc-text-primary);
}

.ljc-type-subheading {
  font-family: var(--ljc-font-body);
  font-size: var(--ljc-type-subheading);
  font-weight: var(--ljc-weight-medium);
  line-height: 1.4;
  color: var(--ljc-text-primary);
}

.ljc-type-body {
  font-family: var(--ljc-font-body);
  font-size: var(--ljc-type-body);
  font-weight: var(--ljc-weight-regular);
  line-height: 1.6;
  color: var(--ljc-text-primary);
}

.ljc-type-caption {
  font-family: var(--ljc-font-body);
  font-size: var(--ljc-type-caption);
  font-weight: var(--ljc-weight-regular);
  line-height: 1.5;
  color: var(--ljc-text-secondary);
}

.ljc-type-mono {
  font-family: var(--ljc-font-mono);
  font-size: var(--ljc-type-caption);
  font-weight: var(--ljc-weight-regular);
  line-height: 1.4;
  color: var(--ljc-text-secondary);
  letter-spacing: 0.02em;
}

/* =========================================================================
   4. Glassmorphism Utility
   ========================================================================= */

.ljc-glass {
  background: var(--ljc-glass-bg);
  -webkit-backdrop-filter: blur(var(--ljc-glass-blur));
  backdrop-filter: blur(var(--ljc-glass-blur));
  border: 1px solid var(--ljc-glass-border);
  box-shadow: var(--ljc-glass-shadow);
}

/* =========================================================================
   5. Reduced Motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .ljc-catalog-wrapper *,
  .ljc-catalog-wrapper *::before,
  .ljc-catalog-wrapper *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   6. Focus Styles (Accessibility)
   ========================================================================= */

.ljc-catalog-wrapper :focus-visible {
  outline: 2px solid var(--ljc-accent-primary);
  outline-offset: 2px;
  border-radius: var(--ljc-radius-sm);
}

.ljc-catalog-wrapper :focus:not(:focus-visible) {
  outline: none;
}

/* =========================================================================
   7. Screen Reader Only
   ========================================================================= */

.ljc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}