/**
 * ProRank SEO Design System Variables
 *
 * CSS Custom Properties for consistent styling across the plugin
 */

:root {
  /* Colors - ProRank SEO Green Theme */
  --pr-color-primary: #059669;
  --pr-color-primary-dark: #047857;
  --pr-color-primary-light: #34d399;
  --pr-color-primary-50: #ecfdf5;
  --pr-color-primary-100: #d1fae5;
  --pr-color-primary-500: #10b981;
  --pr-color-primary-600: #059669;
  --pr-color-primary-700: #047857;
  --pr-color-secondary: #50575e;
  --pr-color-secondary-dark: #23282d;
  --pr-color-secondary-light: #82878c;
  --pr-color-success: #00a32a;
  --pr-color-success-light: #e5f5ea;
  --pr-color-warning: #dba617;
  --pr-color-warning-light: #fff8e5;
  --pr-color-error: #d63638;
  --pr-color-error-light: #fee2e2;
  --pr-color-info: #0073aa;
  --pr-color-info-light: #e5f2f7;

  /* Text Colors */
  --pr-color-text-primary: #1e1e1e;
  --pr-color-text-secondary: #555;
  --pr-color-text-tertiary: #757575;
  --pr-color-text-disabled: #a0a0a0;

  /* Background Colors */
  --pr-color-background: #fff;
  --pr-color-background-secondary: #f9f9f9;
  --pr-color-background-hover: #f0f0f0;
  --pr-color-background-light: #f9f9f9;
  --pr-color-background-dark: #2c2c2c;
  --pr-color-background-secondary-dark: #404040;

  /* Border Colors */
  --pr-color-border: #dcdcde;
  --pr-color-border-light: #e0e0e0;
  --pr-color-border-hover: #ccc;
  --pr-color-border-dark: #404040;
  --pr-color-border-hover-dark: #555;

  /* Gradients */
  --pr-gradient-primary: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --pr-gradient-success: linear-gradient(135deg, #00a32a 0%, #007e21 100%);

  /* Typography */
  --pr-font-family-sans:
    -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen-sans, ubuntu, cantarell,
    'Helvetica Neue', sans-serif;
  --pr-font-family-mono: consolas, monaco, monospace;
  --pr-font-size-xsmall: 11px;
  --pr-font-size-small: 13px;
  --pr-font-size-base: 14px;
  --pr-font-size-medium: 16px;
  --pr-font-size-large: 18px;
  --pr-font-size-xlarge: 20px;
  --pr-font-size-2xl: 24px;
  --pr-font-size-3xl: 30px;
  --pr-font-weight-normal: 400;
  --pr-font-weight-medium: 500;
  --pr-font-weight-semibold: 600;
  --pr-font-weight-bold: 700;
  --pr-line-height-tight: 1.25;
  --pr-line-height-base: 1.5;
  --pr-line-height-relaxed: 1.75;

  /* Spacing */
  --pr-spacing-xsmall: 4px;
  --pr-spacing-small: 8px;
  --pr-spacing-medium: 16px;
  --pr-spacing-large: 24px;
  --pr-spacing-xlarge: 32px;
  --pr-spacing-2xl: 48px;

  /* Legacy spacing aliases */
  --pr-spacing-xs: 4px;
  --pr-spacing-sm: 8px;
  --pr-spacing-md: 16px;
  --pr-spacing-lg: 24px;
  --pr-spacing-xl: 32px;

  /* Border Radius */
  --pr-border-radius-small: 4px;
  --pr-border-radius-medium: 6px;
  --pr-border-radius-large: 8px;
  --pr-border-radius-xlarge: 12px;
  --pr-border-radius-full: 9999px;

  /* Legacy radius aliases */
  --pr-border-radius-sm: 4px;
  --pr-border-radius-md: 6px;
  --pr-border-radius-lg: 8px;
  --pr-radius-md: 6px;
  --pr-radius-full: 9999px;

  /* Shadows */
  --pr-shadow-small: 0 1px 2px rgb(0 0 0 / 5%);
  --pr-shadow-medium: 0 4px 6px rgb(0 0 0 / 7%);
  --pr-shadow-large: 0 10px 15px rgb(0 0 0 / 10%);
  --pr-shadow-xlarge: 0 20px 25px rgb(0 0 0 / 10%);

  /* Legacy shadow aliases */
  --pr-shadow-xs: 0 1px 2px rgb(0 0 0 / 5%);
  --pr-shadow-md: 0 4px 6px rgb(0 0 0 / 7%);
  --pr-shadow-lg: 0 10px 15px rgb(0 0 0 / 10%);
  --pr-shadow-xl: 0 20px 25px rgb(0 0 0 / 10%);

  /* Motion */
  --pr-motion-duration-fast: 200ms;
  --pr-motion-duration-normal: 300ms;
  --pr-motion-duration-slow: 500ms;
  --pr-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --pr-motion-easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --pr-motion-easing-ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* Legacy motion aliases */
  --pr-transition-fast: 200ms;
  --pr-transition-normal: 300ms;
  --pr-transition-slow: 500ms;
  --pr-ease-in-out: ease-in-out;

  /* Z-index */
  --pr-z-dropdown: 1000;
  --pr-z-sticky: 1020;
  --pr-z-fixed: 1030;
  --pr-z-modal-backdrop: 1040;
  --pr-z-modal: 1050;
  --pr-z-popover: 1060;
  --pr-z-tooltip: 1070;

  /* Legacy */
  --pr-color-white: #fff;
  --pr-color-gray-50: #f9fafb;
  --pr-color-gray-100: #f3f4f6;
  --pr-color-gray-200: #e5e7eb;
  --pr-color-gray-400: #9ca3af;
  --pr-color-gray-500: #6b7280;
  --pr-color-yellow-500: #eab308;
  --pr-spacing-0-5: 2px;
  --pr-spacing-1: 4px;
  --pr-spacing-2: 8px;
  --pr-spacing-3: 12px;
  --pr-spacing-4: 16px;
  --pr-size-4: 16px;
  --pr-size-80: 320px;
  --pr-size-100: 400px;
  --pr-size-125: 500px;
  --pr-opacity-50: 0.5;
  --pr-opacity-60: 0.6;
  --pr-filter-grayscale-50: 50%;
  
  /* Additional variables for CSS compliance */
  --pr-font-size-xs: 12px;
  --pr-font-size-sm: 13px;
  --pr-font-size-xl: 20px;
  --pr-line-height-normal: 1.5;
  --pr-border-width: 1px;
  --pr-border-width-thick: 2px;
  --pr-radius-small: 4px;
  --pr-radius-medium: 8px;
  --pr-color-white-5: rgb(255 255 255 / 5%);
  --pr-color-white-10: rgb(255 255 255 / 10%);
  --pr-color-white-20: rgb(255 255 255 / 20%);
  --pr-color-white-80: rgb(255 255 255 / 80%);
  --pr-color-text-primary-dark: #e0e0e0;
  --pr-color-text-secondary-dark: #a0a0a0;
}