/**
 * OptinPerks CSS Variables
 * Centralized design tokens for consistent styling across the plugin
 */

:root {
  /* Color Palette */
  --optinperks-bg-primary: #fff;
  --optinperks-bg-secondary: #f8f9fa;
  --optinperks-bg-hover: #f9f9f9;
  --optinperks-bg-info: #e7f3ff;
  --optinperks-bg-success: #d4edda;
  --optinperks-bg-warning: #fff3cd;
  --optinperks-bg-error: #f8d7da;
  --optinperks-bg-danger: #dc3545;
  
  /* Text Colors */
  --optinperks-text-primary: #23282d;
  --optinperks-text-secondary: #666;
  --optinperks-text-muted: #999;
  --optinperks-text-success: #155724;
  --optinperks-text-warning: #856404;
  --optinperks-text-error: #721c24;
  --optinperks-text-info: #0c5460;
  
  /* Brand Colors */
  --optinperks-brand-primary: #0073aa;
  --optinperks-brand-secondary: #005a87;
  --optinperks-brand-success: #28a745;
  --optinperks-brand-warning: #ffc107;
  --optinperks-brand-danger: #dc3545;
  --optinperks-brand-info: #17a2b8;
  
  /* Extended Brand Colors for Consistency */
  --optinperks-brand-primary-alt: #007cba;        /* Alternative primary blue */
  --optinperks-brand-focus: #0073aa;              /* Focus states */
  --optinperks-brand-hover: #005a87;              /* Hover states */
  --optinperks-brand-link: #007cba;               /* Link colors */
  --optinperks-brand-link-hover: #005a87;         /* Link hover states */
  
  /* Border Colors */
  --optinperks-border-primary: #ddd;
  --optinperks-border-secondary: #eee;
  --optinperks-border-focus: #0073aa;
  --optinperks-border-success: #28a745;
  --optinperks-border-warning: #ffc107;
  --optinperks-border-error: #dc3545;
  
  /* Consent & GDPR Colors */
  --optinperks-consent-bg: #fff3cd;
  --optinperks-consent-border: #ffeaa7;
  --optinperks-consent-accent: #f39c12;
  --optinperks-consent-text: #2c3e50;
  --optinperks-consent-label: #333;
  --optinperks-consent-privacy-text: #666;
  --optinperks-consent-privacy-link: #007cba;
  --optinperks-consent-privacy-link-hover: #005a87;
  --optinperks-consent-error-bg: #fef2f2;
  --optinperks-consent-error-border: #dc3545;
  --optinperks-consent-error-text: #dc3545;
  
  /* Form Validation Colors */
  --optinperks-validation-error: #d63638;
  --optinperks-validation-error-bg: #fef7f7;
  --optinperks-validation-error-border: #d63638;
  --optinperks-validation-error-text: #d63638;
  --optinperks-validation-error-shadow: rgba(214, 54, 56, 0.1);
  
  /* Notification & Message System */
  --optinperks-notification-success-bg: #d4edda;
  --optinperks-notification-success-border: #c3e6cb;
  --optinperks-notification-success-text: #155724;
  --optinperks-notification-success-icon: #28a745;
  
  --optinperks-notification-error-bg: #f8d7da;
  --optinperks-notification-error-border: #f5c6cb;
  --optinperks-notification-error-text: #721c24;
  --optinperks-notification-error-icon: #dc3545;
  
  --optinperks-notification-warning-bg: #fff3cd;
  --optinperks-notification-warning-border: #ffeaa7;
  --optinperks-notification-warning-text: #856404;
  --optinperks-notification-warning-icon: #ffc107;
  
  --optinperks-notification-info-bg: #d1ecf1;
  --optinperks-notification-info-border: #bee5eb;
  --optinperks-notification-info-text: #0c5460;
  --optinperks-notification-info-icon: #17a2b8;
  
  /* Message Typography & Spacing */
  --optinperks-message-padding: 12px 16px;
  --optinperks-message-margin: 15px 0;
  --optinperks-message-border-radius: 4px;
  --optinperks-message-font-size: 14px;
  --optinperks-message-line-height: 1.4;
  --optinperks-message-font-weight: 400;
  --optinperks-message-border-width: 1px;
  
  /* Admin Notice Specific */
  --optinperks-admin-notice-padding: 12px;
  --optinperks-admin-notice-margin: 15px 0;
  --optinperks-admin-notice-border-left: 4px solid;
  --optinperks-admin-notice-box-shadow: 0 1px 1px rgba(0,0,0,.04);
  
  /* Spacing Scale */
  --optinperks-spacing-xs: 5px;
  --optinperks-spacing-sm: 10px;
  --optinperks-spacing-md: 15px;
  --optinperks-spacing-lg: 20px;
  --optinperks-spacing-xl: 30px;
  --optinperks-spacing-xxl: 40px;
  
  /* Layout & Container Spacing */
  --optinperks-layout-container-max-width: 1200px;
  --optinperks-layout-section-padding: 20px;
  --optinperks-layout-card-padding: 20px;
  --optinperks-layout-modal-padding: 20px;
  --optinperks-layout-content-padding: 20px;
  --optinperks-layout-header-padding: 15px 20px;
  --optinperks-layout-footer-padding: 15px 20px;
  
  /* Form Layout Spacing */
  --optinperks-form-row-spacing: 15px;
  --optinperks-form-field-spacing: 10px;
  --optinperks-form-section-spacing: 25px;
  --optinperks-form-table-cell-padding: 15px 10px;
  --optinperks-form-table-header-padding: 20px 10px 20px 0;
  --optinperks-form-description-margin: 5px 0;
  
  /* Grid & Flexbox Spacing */
  --optinperks-grid-gap-xs: 5px;
  --optinperks-grid-gap-sm: 10px;
  --optinperks-grid-gap-md: 20px;
  --optinperks-grid-gap-lg: 30px;
  --optinperks-flex-gap-sm: 10px;
  --optinperks-flex-gap-md: 15px;
  --optinperks-flex-gap-lg: 20px;
  
  /* Typography Scale */
  --optinperks-font-size-xs: 12px;
  --optinperks-font-size-sm: 14px;
  --optinperks-font-size-base: 16px;
  --optinperks-font-size-lg: 18px;
  --optinperks-font-size-xl: 20px;
  --optinperks-font-size-xxl: 24px;
  --optinperks-font-size-h1: 1.3em;
  --optinperks-font-size-h2: 1.2em;
  --optinperks-font-size-h3: 1.1em;
  --optinperks-font-size-h4: 1em;
  
  --optinperks-line-height-tight: 1.2;
  --optinperks-line-height-normal: 1.4;
  --optinperks-line-height-relaxed: 1.6;
  
  --optinperks-font-weight-normal: 400;
  --optinperks-font-weight-medium: 500;
  --optinperks-font-weight-semibold: 600;
  --optinperks-font-weight-bold: 700;
  
  /* Border Radius */
  --optinperks-border-radius-sm: 3px;
  --optinperks-border-radius: 4px;
  --optinperks-border-radius-lg: 8px;
  --optinperks-border-radius-xl: 10px;
  
  /* Shadow System */
  --optinperks-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --optinperks-shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
  --optinperks-shadow: 0 4px 8px rgba(0,0,0,0.1);
  --optinperks-shadow-md: 0 6px 12px rgba(0,0,0,0.15);
  --optinperks-shadow-lg: 0 10px 30px rgba(0,0,0,0.3);
  --optinperks-shadow-xl: 0 20px 40px rgba(0,0,0,0.4);
  
  /* Interactive Shadows */
  --optinperks-shadow-hover: 0 4px 12px rgba(0,0,0,0.15);
  --optinperks-shadow-focus: 0 0 0 3px rgba(0, 115, 170, 0.1);
  --optinperks-shadow-active: 0 2px 4px rgba(0,0,0,0.2);
  
  /* Animation & Interaction System */
  --optinperks-transition-fast: 0.15s ease;
  --optinperks-transition: 0.2s ease;
  --optinperks-transition-slow: 0.3s ease;
  --optinperks-transition-slower: 0.5s ease;
  
  /* Animation Timing Functions */
  --optinperks-ease-in: ease-in;
  --optinperks-ease-out: ease-out;
  --optinperks-ease-in-out: ease-in-out;
  --optinperks-ease-cubic: cubic-bezier(0.4, 0, 0.2, 1);
  --optinperks-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Animation Durations */
  --optinperks-duration-fast: 0.15s;
  --optinperks-duration-normal: 0.3s;
  --optinperks-duration-slow: 0.5s;
  --optinperks-duration-slower: 0.8s;
  
  /* Hover & Focus States */
  --optinperks-hover-scale: 1.02;
  --optinperks-hover-translate: translateY(-2px);
  --optinperks-focus-scale: 1.01;
  --optinperks-focus-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
  
  /* Loading & State Animations */
  --optinperks-loading-opacity: 0.6;
  --optinperks-disabled-opacity: 0.5;
  --optinperks-active-opacity: 0.9;
  
  /* Complete Color Palette */
  --optinperks-color-white: #ffffff;
  --optinperks-color-black: #000000;
  --optinperks-color-gray-50: #f9f9f9;
  --optinperks-color-gray-100: #f3f3f3;
  --optinperks-color-gray-200: #e9ecef;
  --optinperks-color-gray-300: #dee2e6;
  --optinperks-color-gray-400: #ced4da;
  --optinperks-color-gray-500: #adb5bd;
  --optinperks-color-gray-600: #6c757d;
  --optinperks-color-gray-700: #495057;
  --optinperks-color-gray-800: #343a40;
  --optinperks-color-gray-900: #212529;
  
  /* Semantic Colors */
  --optinperks-color-success: #28a745;
  --optinperks-color-success-light: #d4edda;
  --optinperks-color-success-dark: #155724;
  
  --optinperks-color-warning: #ffc107;
  --optinperks-color-warning-light: #fff3cd;
  --optinperks-color-warning-dark: #856404;
  
  --optinperks-color-danger: #dc3545;
  --optinperks-color-danger-light: #f8d7da;
  --optinperks-color-danger-dark: #721c24;
  
  --optinperks-color-info: #17a2b8;
  --optinperks-color-info-light: #d1ecf1;
  --optinperks-color-info-dark: #0c5460;
  
  /* WordPress Admin Colors */
  --optinperks-wp-primary: #2271b1;
  --optinperks-wp-secondary: #0073aa;
  --optinperks-wp-accent: #007cba;
  --optinperks-wp-text: #23282d;
  --optinperks-wp-text-secondary: #666;
  --optinperks-wp-border: #ccd0d4;
  --optinperks-wp-border-light: #e9ecef;
  
  /* Overlay & Modal Colors */
  --optinperks-overlay-bg: rgba(0, 0, 0, 0.7);
  --optinperks-modal-bg: #fefefe;
  --optinperks-modal-border: #888;
  --optinperks-modal-close: #aaa;
  --optinperks-modal-close-hover: #000;
  
  /* Form & Input Colors */
  --optinperks-input-bg: #ffffff;
  --optinperks-input-border: #ddd;
  --optinperks-input-border-focus: #0073aa;
  --optinperks-input-disabled-bg: #f8f9fa;
  --optinperks-input-disabled-border: #6c757d;
  --optinperks-input-disabled-text: #495057;
  
  /* Status & Badge Colors */
  --optinperks-status-pending: #f56e28;
  --optinperks-status-active: #28a745;
  --optinperks-status-inactive: #6c757d;
  --optinperks-status-error: #dc3545;
  
  /* Progress & Loading Colors */
  --optinperks-progress-bg: #e9ecef;
  --optinperks-progress-fill: #28a745;
  --optinperks-progress-fill-alt: #20c997;
  --optinperks-spinner-bg: #f3f3f3;
  --optinperks-spinner-active: #007cba;
  
  /* Z-index Scale */
  --optinperks-z-dropdown: 1000;
  --optinperks-z-modal: 100000;
  --optinperks-z-tooltip: 100001;
}