/**
 * Elegant Removals Design System
 * Material Design 3 + WordPress Integration
 * Supports: Light/Dark modes, RTL, Accessibility (WCAG 2.1 AA)
 *
 * @package Elegant_Removals_Offers
 * @version 1.0.0
 */

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

:root {
  /* ===== Color Palette - Material Design 3 ===== */

  /* Primary Colors (Red) */
  --er-primary-10: #310000;
  --er-primary-20: #5a0000;
  --er-primary-30: #830000;
  --er-primary-40: #ab0000;
  --er-primary-50: #d30000;
  --er-primary-60: #ff0000;
  --er-primary-70: #ff3333;
  --er-primary-80: #ff6666;
  --er-primary-90: #ff9999;
  --er-primary-95: #ffcccc;
  --er-primary-99: #fff5f5;

  /* Secondary Colors (Teal) */
  --er-secondary-10: #002020;
  --er-secondary-20: #003737;
  --er-secondary-30: #004d4d;
  --er-secondary-40: #006666;
  --er-secondary-50: #00897b;
  --er-secondary-60: #26a69a;
  --er-secondary-70: #4db6ac;
  --er-secondary-80: #80cbc4;
  --er-secondary-90: #b2dfdb;
  --er-secondary-95: #e0f2f1;

  /* Tertiary/Accent Colors (Amber) */
  --er-accent-10: #2e1500;
  --er-accent-20: #4a2800;
  --er-accent-30: #663c00;
  --er-accent-40: #835200;
  --er-accent-50: #ff6f00;
  --er-accent-60: #ff8f00;
  --er-accent-70: #ffa726;
  --er-accent-80: #ffb74d;
  --er-accent-90: #ffcc80;
  --er-accent-95: #ffe0b2;

  /* Error Colors */
  --er-error-10: #410002;
  --er-error-20: #690005;
  --er-error-30: #93000a;
  --er-error-40: #ba1a1a;
  --er-error-50: #de3730;
  --er-error-60: #ff5449;
  --er-error-70: #ff897d;
  --er-error-80: #ffb4ab;
  --er-error-90: #ffdad6;
  --er-error-95: #ffedea;

  /* Success Colors */
  --er-success-10: #002204;
  --er-success-20: #00390a;
  --er-success-30: #005313;
  --er-success-40: #006e1c;
  --er-success-50: #008a25;
  --er-success-60: #00a82f;
  --er-success-70: #26c249;
  --er-success-80: #4caf50;
  --er-success-90: #81c784;
  --er-success-95: #c8e6c9;

  /* Warning Colors */
  --er-warning-10: #2e1500;
  --er-warning-20: #4a2800;
  --er-warning-30: #663c00;
  --er-warning-40: #835200;
  --er-warning-50: #f57c00;
  --er-warning-60: #ff9800;
  --er-warning-70: #ffb74d;
  --er-warning-80: #ffd54f;
  --er-warning-90: #ffe082;
  --er-warning-95: #fff3e0;

  /* Neutral Colors (Gray) */
  --er-neutral-0: #000000;
  --er-neutral-10: #1a1c1e;
  --er-neutral-20: #2f3033;
  --er-neutral-30: #46474a;
  --er-neutral-40: #5e5e62;
  --er-neutral-50: #76777a;
  --er-neutral-60: #909094;
  --er-neutral-70: #ababaf;
  --er-neutral-80: #c6c6ca;
  --er-neutral-90: #e2e2e6;
  --er-neutral-95: #f1f0f4;
  --er-neutral-99: #fdfcff;
  --er-neutral-100: #ffffff;

  /* ===== Light Theme (Default) ===== */
  --er-color-primary: var(--er-primary-60);
  --er-color-on-primary: var(--er-neutral-100);
  --er-color-primary-container: var(--er-primary-90);
  --er-color-on-primary-container: var(--er-primary-10);

  --er-color-secondary: var(--er-secondary-60);
  --er-color-on-secondary: var(--er-neutral-100);
  --er-color-secondary-container: var(--er-secondary-90);
  --er-color-on-secondary-container: var(--er-secondary-10);

  --er-color-accent: var(--er-accent-60);
  --er-color-on-accent: var(--er-neutral-100);

  --er-color-error: var(--er-error-40);
  --er-color-on-error: var(--er-neutral-100);
  --er-color-error-container: var(--er-error-90);
  --er-color-on-error-container: var(--er-error-10);

  --er-color-success: var(--er-success-60);
  --er-color-on-success: var(--er-neutral-100);
  --er-color-success-container: var(--er-success-90);
  --er-color-on-success-container: var(--er-success-10);

  --er-color-warning: var(--er-warning-60);
  --er-color-on-warning: var(--er-neutral-100);
  --er-color-warning-container: var(--er-warning-90);
  --er-color-on-warning-container: var(--er-warning-10);

  --er-color-surface: var(--er-neutral-99);
  --er-color-surface-dim: var(--er-neutral-95);
  --er-color-surface-bright: var(--er-neutral-99);
  --er-color-surface-container-lowest: var(--er-neutral-100);
  --er-color-surface-container-low: var(--er-neutral-99);
  --er-color-surface-container: var(--er-neutral-95);
  --er-color-surface-container-high: var(--er-neutral-90);
  --er-color-surface-container-highest: var(--er-neutral-80);

  --er-color-on-surface: var(--er-neutral-10);
  --er-color-on-surface-variant: var(--er-neutral-30);
  --er-color-outline: var(--er-neutral-50);
  --er-color-outline-variant: var(--er-neutral-80);

  --er-color-background: var(--er-neutral-99);
  --er-color-on-background: var(--er-neutral-10);

  /* ===== Typography ===== */
  --er-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --er-font-family-mono: "Courier New", Courier, monospace;

  /* Font Sizes (Material Design 3 Type Scale) */
  --er-font-size-display-large: 57px;
  --er-font-size-display-medium: 45px;
  --er-font-size-display-small: 36px;
  --er-font-size-headline-large: 32px;
  --er-font-size-headline-medium: 28px;
  --er-font-size-headline-small: 24px;
  --er-font-size-title-large: 22px;
  --er-font-size-title-medium: 16px;
  --er-font-size-title-small: 14px;
  --er-font-size-label-large: 14px;
  --er-font-size-label-medium: 12px;
  --er-font-size-label-small: 11px;
  --er-font-size-body-large: 16px;
  --er-font-size-body-medium: 14px;
  --er-font-size-body-small: 12px;

  /* Line Heights */
  --er-line-height-tight: 1.2;
  --er-line-height-normal: 1.5;
  --er-line-height-relaxed: 1.75;

  /* Font Weights */
  --er-font-weight-regular: 400;
  --er-font-weight-medium: 500;
  --er-font-weight-semibold: 600;
  --er-font-weight-bold: 700;

  /* ===== Spacing (8px base grid) ===== */
  --er-spacing-xs: 4px;
  --er-spacing-sm: 8px;
  --er-spacing-md: 16px;
  --er-spacing-lg: 24px;
  --er-spacing-xl: 32px;
  --er-spacing-2xl: 48px;
  --er-spacing-3xl: 64px;

  /* ===== Elevation (Shadows) ===== */
  --er-elevation-0: none;
  --er-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --er-elevation-2: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --er-elevation-3: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --er-elevation-4: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --er-elevation-5: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* ===== Border Radius ===== */
  --er-radius-none: 0;
  --er-radius-sm: 4px;
  --er-radius-md: 8px;
  --er-radius-lg: 12px;
  --er-radius-xl: 16px;
  --er-radius-2xl: 24px;
  --er-radius-full: 9999px;

  /* ===== Transitions ===== */
  --er-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --er-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --er-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== Z-Index Scale ===== */
  --er-z-dropdown: 1000;
  --er-z-sticky: 1020;
  --er-z-fixed: 1030;
  --er-z-modal-backdrop: 1040;
  --er-z-modal: 1050;
  --er-z-popover: 1060;
  --er-z-tooltip: 1070;

  /* ===== Breakpoints (for reference in media queries) ===== */
  --er-screen-sm: 640px;
  --er-screen-md: 768px;
  --er-screen-lg: 1024px;
  --er-screen-xl: 1280px;
  --er-screen-2xl: 1536px;
  --er-screen-4k: 2560px;
}

/* ============================================================================
   Dark Theme
   ========================================================================= */

@media (prefers-color-scheme: dark) {
  :root {
    --er-color-primary: var(--er-primary-80);
    --er-color-on-primary: var(--er-primary-20);
    --er-color-primary-container: var(--er-primary-30);
    --er-color-on-primary-container: var(--er-primary-90);

    --er-color-secondary: var(--er-secondary-80);
    --er-color-on-secondary: var(--er-secondary-20);
    --er-color-secondary-container: var(--er-secondary-30);
    --er-color-on-secondary-container: var(--er-secondary-90);

    --er-color-accent: var(--er-accent-80);
    --er-color-on-accent: var(--er-accent-20);

    --er-color-error: var(--er-error-80);
    --er-color-on-error: var(--er-error-20);
    --er-color-error-container: var(--er-error-30);
    --er-color-on-error-container: var(--er-error-90);

    --er-color-success: var(--er-success-80);
    --er-color-on-success: var(--er-success-20);
    --er-color-success-container: var(--er-success-30);
    --er-color-on-success-container: var(--er-success-90);

    --er-color-warning: var(--er-warning-80);
    --er-color-on-warning: var(--er-warning-20);
    --er-color-warning-container: var(--er-warning-30);
    --er-color-on-warning-container: var(--er-warning-90);

    --er-color-surface: var(--er-neutral-10);
    --er-color-surface-dim: var(--er-neutral-10);
    --er-color-surface-bright: var(--er-neutral-20);
    --er-color-surface-container-lowest: var(--er-neutral-10);
    --er-color-surface-container-low: var(--er-neutral-20);
    --er-color-surface-container: var(--er-neutral-30);
    --er-color-surface-container-high: var(--er-neutral-40);
    --er-color-surface-container-highest: var(--er-neutral-50);

    --er-color-on-surface: var(--er-neutral-90);
    --er-color-on-surface-variant: var(--er-neutral-80);
    --er-color-outline: var(--er-neutral-60);
    --er-color-outline-variant: var(--er-neutral-40);

    --er-color-background: var(--er-neutral-10);
    --er-color-on-background: var(--er-neutral-90);

    /* Enhanced shadows for dark mode */
    --er-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --er-elevation-2: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
    --er-elevation-3: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --er-elevation-4: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --er-elevation-5: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  }
}

/* Manual dark mode toggle */
[data-theme="dark"] {
  --er-color-primary: var(--er-primary-80);
  --er-color-on-primary: var(--er-primary-20);
  --er-color-primary-container: var(--er-primary-30);
  --er-color-on-primary-container: var(--er-primary-90);

  --er-color-secondary: var(--er-secondary-80);
  --er-color-on-secondary: var(--er-secondary-20);
  --er-color-secondary-container: var(--er-secondary-30);
  --er-color-on-secondary-container: var(--er-secondary-90);

  --er-color-accent: var(--er-accent-80);
  --er-color-on-accent: var(--er-accent-20);

  --er-color-error: var(--er-error-80);
  --er-color-on-error: var(--er-error-20);
  --er-color-error-container: var(--er-error-30);
  --er-color-on-error-container: var(--er-error-90);

  --er-color-success: var(--er-success-80);
  --er-color-on-success: var(--er-success-20);
  --er-color-success-container: var(--er-success-30);
  --er-color-on-success-container: var(--er-success-90);

  --er-color-warning: var(--er-warning-80);
  --er-color-on-warning: var(--er-warning-20);
  --er-color-warning-container: var(--er-warning-30);
  --er-color-on-warning-container: var(--er-warning-90);

  --er-color-surface: var(--er-neutral-10);
  --er-color-surface-dim: var(--er-neutral-10);
  --er-color-surface-bright: var(--er-neutral-20);
  --er-color-surface-container-lowest: var(--er-neutral-10);
  --er-color-surface-container-low: var(--er-neutral-20);
  --er-color-surface-container: var(--er-neutral-30);
  --er-color-surface-container-high: var(--er-neutral-40);
  --er-color-surface-container-highest: var(--er-neutral-50);

  --er-color-on-surface: var(--er-neutral-90);
  --er-color-on-surface-variant: var(--er-neutral-80);
  --er-color-outline: var(--er-neutral-60);
  --er-color-outline-variant: var(--er-neutral-40);

  --er-color-background: var(--er-neutral-10);
  --er-color-on-background: var(--er-neutral-90);

  --er-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --er-elevation-2: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
  --er-elevation-3: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --er-elevation-4: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --er-elevation-5: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
}

/* ============================================================================
   Base Styles & Resets
   ========================================================================= */

.elegant-removals-wrapper * {
  box-sizing: border-box;
}

.elegant-removals-wrapper {
  font-family: var(--er-font-family);
  font-size: var(--er-font-size-body-medium);
  line-height: var(--er-line-height-normal);
  color: var(--er-color-on-background);
  background-color: var(--er-color-background);
}

/* ============================================================================
   Typography Classes
   ========================================================================= */

.er-display-large {
  font-size: var(--er-font-size-display-large);
  line-height: var(--er-line-height-tight);
  font-weight: var(--er-font-weight-regular);
}

.er-display-medium {
  font-size: var(--er-font-size-display-medium);
  line-height: var(--er-line-height-tight);
  font-weight: var(--er-font-weight-regular);
}

.er-display-small {
  font-size: var(--er-font-size-display-small);
  line-height: var(--er-line-height-tight);
  font-weight: var(--er-font-weight-regular);
}

.er-headline-large {
  font-size: var(--er-font-size-headline-large);
  line-height: var(--er-line-height-normal);
  font-weight: var(--er-font-weight-regular);
}

.er-headline-medium {
  font-size: var(--er-font-size-headline-medium);
  line-height: var(--er-line-height-normal);
  font-weight: var(--er-font-weight-regular);
}

.er-headline-small {
  font-size: var(--er-font-size-headline-small);
  line-height: var(--er-line-height-normal);
  font-weight: var(--er-font-weight-regular);
}

.er-title-large {
  font-size: var(--er-font-size-title-large);
  line-height: var(--er-line-height-normal);
  font-weight: var(--er-font-weight-medium);
}

.er-title-medium {
  font-size: var(--er-font-size-title-medium);
  line-height: var(--er-line-height-normal);
  font-weight: var(--er-font-weight-medium);
}

.er-title-small {
  font-size: var(--er-font-size-title-small);
  line-height: var(--er-line-height-normal);
  font-weight: var(--er-font-weight-medium);
}

.er-body-large {
  font-size: var(--er-font-size-body-large);
  line-height: var(--er-line-height-relaxed);
  font-weight: var(--er-font-weight-regular);
}

.er-body-medium {
  font-size: var(--er-font-size-body-medium);
  line-height: var(--er-line-height-normal);
  font-weight: var(--er-font-weight-regular);
}

.er-body-small {
  font-size: var(--er-font-size-body-small);
  line-height: var(--er-line-height-normal);
  font-weight: var(--er-font-weight-regular);
}

.er-label-large {
  font-size: var(--er-font-size-label-large);
  line-height: var(--er-line-height-normal);
  font-weight: var(--er-font-weight-medium);
}

.er-label-medium {
  font-size: var(--er-font-size-label-medium);
  line-height: var(--er-line-height-normal);
  font-weight: var(--er-font-weight-medium);
}

.er-label-small {
  font-size: var(--er-font-size-label-small);
  line-height: var(--er-line-height-normal);
  font-weight: var(--er-font-weight-medium);
}

/* ============================================================================
   RTL Support
   ========================================================================= */

[dir="rtl"] .elegant-removals-wrapper {
  direction: rtl;
  text-align: right;
}

/* ============================================================================
   Accessibility Utilities
   ========================================================================= */

/* Screen reader only */
.er-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;
}

/* Focus visible styles for keyboard navigation */
.elegant-removals-wrapper *:focus-visible {
  outline: 2px solid var(--er-color-primary);
  outline-offset: 2px;
  border-radius: var(--er-radius-sm);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --er-color-outline: var(--er-neutral-0);
    --er-elevation-1: 0 0 0 1px var(--er-color-outline);
    --er-elevation-2: 0 0 0 2px var(--er-color-outline);
    --er-elevation-3: 0 0 0 2px var(--er-color-outline);
    --er-elevation-4: 0 0 0 3px var(--er-color-outline);
    --er-elevation-5: 0 0 0 3px var(--er-color-outline);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .elegant-removals-wrapper * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   Responsive Typography (4K Support)
   ========================================================================= */

/* Tablet and up */
@media (min-width: 768px) {
  :root {
    --er-font-size-display-large: 64px;
    --er-font-size-display-medium: 52px;
    --er-font-size-display-small: 40px;
  }
}

/* 4K displays */
@media (min-width: 2560px) {
  :root {
    --er-font-size-display-large: 80px;
    --er-font-size-display-medium: 64px;
    --er-font-size-display-small: 48px;
    --er-font-size-headline-large: 40px;
    --er-font-size-headline-medium: 36px;
    --er-font-size-headline-small: 32px;
    --er-font-size-body-large: 18px;
    --er-font-size-body-medium: 16px;
  }
}