/**
 * WC Sales Point - CSS Variables (Design Tokens)
 * Based on DreamPOS Admin Template
 * 
 * @package WC_Sales_Point
 * @version 1.0.0
 */

:root {
  /* ==========================================
     COLOR PALETTE - Primary Colors
     ========================================== */
  --wc-sales-point-primary-color: #0f766e;
  --wc-sales-point-primary-hover: #0d6660;
  --wc-sales-point-primary-active: #0b5751;
  --wc-sales-point-primary-light: #e6f7f6;
  --wc-sales-point-primary-dark: #092C4C;
  --wc-sales-point-primary-rgb: 15, 118, 110;

  /* ==========================================
     COLOR PALETTE - Secondary Colors
     ========================================== */
  --wc-sales-point-secondary-color: #6c757d;
  --wc-sales-point-secondary-hover: #5a6268;
  --wc-sales-point-secondary-light: #f8f9fa;

  /* ==========================================
     COLOR PALETTE - Semantic Colors
     ========================================== */
  --wc-sales-point-success-color: #28a745;
  --wc-sales-point-success-hover: #218838;
  --wc-sales-point-success-light: #d4edda;
  --wc-sales-point-success-dark: #155724;

  /* Badge text color (white for colored backgrounds) */
  --wc-sales-point-badge-text: #ffffff;

  --wc-sales-point-danger-color: #dc3545;
  --wc-sales-point-danger-hover: #c82333;
  --wc-sales-point-danger-light: #f8d7da;
  --wc-sales-point-danger-dark: #721c24;

  --wc-sales-point-warning-color: #ffc107;
  --wc-sales-point-warning-hover: #e0a800;
  --wc-sales-point-warning-light: #fff3cd;
  --wc-sales-point-warning-dark: #856404;

  --wc-sales-point-info-color: #17a2b8;
  --wc-sales-point-info-hover: #117a8b;
  --wc-sales-point-info-light: #d1ecf1;
  --wc-sales-point-info-dark: #0c5460;

  /* Alert backgrounds and borders */
  --wc-sales-point-success-bg: #d4edda;
  --wc-sales-point-success-border: #c3e6cb;
  --wc-sales-point-error-bg: #f8d7da;
  --wc-sales-point-error-border: #f5c6cb;
  --wc-sales-point-warning-bg: #fff3cd;
  --wc-sales-point-warning-border: #ffeaa7;
  --wc-sales-point-info-bg: #d1ecf1;
  --wc-sales-point-info-border: #bee5eb;

  --wc-sales-point-success-subtle-bg: #d4edda;
  --wc-sales-point-success-subtle-border: #c3e6cb;
  --wc-sales-point-danger-subtle-bg: #f8d7da;
  --wc-sales-point-danger-subtle-border: #f5c6cb;
  --wc-sales-point-warning-subtle-bg: #fff3cd;
  --wc-sales-point-warning-subtle-border: #ffeaa7;
  --wc-sales-point-info-subtle-bg: #d1ecf1;
  --wc-sales-point-info-subtle-border: #bee5eb;

  /* ==========================================
     COLOR PALETTE - Neutral Colors
     ========================================== */
  --wc-sales-point-text-primary: #1F2937;
  --wc-sales-point-text-secondary: #5B6670;
  --wc-sales-point-text-tertiary: #9CA3AF;
  --wc-sales-point-text-disabled: #D1D5DB;
  --wc-sales-point-text-inverse: #ffffff;

  --wc-sales-point-icon-color: #5B6670;

  --wc-sales-point-border-color: #E8E8E8;
  --wc-sales-point-border-light: #F3F4F6;
  --wc-sales-point-border-dark: #D1D5DB;

  --wc-sales-point-background-primary: #ffffff;
  --wc-sales-point-background-secondary: #FAFBFE;
  --wc-sales-point-background-tertiary: #F8F9FA;
  --wc-sales-point-background-hover: #F3F4F6;
  --wc-sales-point-background-active: #E5E7EB;

  /* White Transparency Scale */
  --wc-sales-point-white: #ffffff;
  --wc-sales-point-white-base-10: rgba(255, 255, 255, 0.1);
  --wc-sales-point-white-base-15: rgba(255, 255, 255, 0.15);
  --wc-sales-point-white-base-20: rgba(255, 255, 255, 0.2);
  --wc-sales-point-white-base-25: rgba(255, 255, 255, 0.25);
  --wc-sales-point-white-base-30: rgba(255, 255, 255, 0.3);
  --wc-sales-point-white-base-40: rgba(255, 255, 255, 0.4);
  --wc-sales-point-white-base-50: rgba(255, 255, 255, 0.5);
  --wc-sales-point-white-base-60: rgba(255, 255, 255, 0.6);
  --wc-sales-point-white-base-75: rgba(255, 255, 255, 0.75);
  --wc-sales-point-white-base-80: rgba(255, 255, 255, 0.8);
  --wc-sales-point-white-base-85: rgba(255, 255, 255, 0.85);
  --wc-sales-point-white-base-90: rgba(255, 255, 255, 0.9);
  --wc-sales-point-white-base-95: rgba(255, 255, 255, 0.95);

  /* Black Transparency Scale */
  --wc-sales-point-black: #000000;
  --wc-sales-point-black-base-05: rgba(0, 0, 0, 0.05);
  --wc-sales-point-black-base-10: rgba(0, 0, 0, 0.1);
  --wc-sales-point-black-base-15: rgba(0, 0, 0, 0.15);
  --wc-sales-point-black-base-20: rgba(0, 0, 0, 0.2);
  --wc-sales-point-black-base-25: rgba(0, 0, 0, 0.25);
  --wc-sales-point-black-base-30: rgba(0, 0, 0, 0.3);
  --wc-sales-point-black-base-40: rgba(0, 0, 0, 0.4);
  --wc-sales-point-black-base-50: rgba(0, 0, 0, 0.5);
  --wc-sales-point-black-base-60: rgba(0, 0, 0, 0.6);
  --wc-sales-point-black-base-75: rgba(0, 0, 0, 0.75);
  --wc-sales-point-black-base-80: rgba(0, 0, 0, 0.8);
  --wc-sales-point-black-base-85: rgba(0, 0, 0, 0.85);
  --wc-sales-point-black-base-90: rgba(0, 0, 0, 0.9);
  --wc-sales-point-black-base-95: rgba(0, 0, 0, 0.95);


  /* ==========================================
     COLOR PALETTE - Status Colors
     ========================================== */
  --wc-sales-point-status-pending: #ffc107;
  --wc-sales-point-status-processing: #17a2b8;
  --wc-sales-point-status-completed: #28a745;
  --wc-sales-point-status-cancelled: #dc3545;
  --wc-sales-point-status-refunded: #6c757d;
  --wc-sales-point-status-partial: #ff9800;

  /* ==========================================
     TYPOGRAPHY - Font Families
     ========================================== */
  --wc-sales-point-font-family-primary: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wc-sales-point-font-family-secondary: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wc-sales-point-font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

  /* ==========================================
     TYPOGRAPHY - Font Sizes
     ========================================== */
  --wc-sales-point-font-size-sm: 0.75rem;
  /* 14px */
  --wc-sales-point-font-size-base: 1rem;
  /* 16px */
  --wc-sales-point-font-size-md: 1.125rem;
  /* 18px */
  --wc-sales-point-font-size-lg: 1.25rem;
  /* 20px */
  --wc-sales-point-font-size-xl: 1.5rem;
  /* 24px */
  --wc-sales-point-font-size-2xl: 1.875rem;
  /* 30px */
  --wc-sales-point-font-size-3xl: 2.25rem;
  /* 36px */

  /* ==========================================
     TYPOGRAPHY - Font Weights
     ========================================== */
  --wc-sales-point-font-weight-light: 300;
  --wc-sales-point-font-weight-normal: 400;
  --wc-sales-point-font-weight-medium: 500;
  --wc-sales-point-font-weight-semibold: 600;
  --wc-sales-point-font-weight-bold: 700;
  --wc-sales-point-font-weight-extrabold: 800;

  /* ==========================================
     TYPOGRAPHY - Line Heights
     ========================================== */
  --wc-sales-point-line-height-tight: 1.25;
  --wc-sales-point-line-height-normal: 1.5;
  --wc-sales-point-line-height-relaxed: 1.75;
  --wc-sales-point-line-height-loose: 2;

  /* ==========================================
     SPACING - Base Scale
     ========================================== */
  --wc-sales-point-spacing-0: 0;
  --wc-sales-point-spacing-1: 0.25rem;
  /* 4px */
  --wc-sales-point-spacing-2: 0.5rem;
  /* 8px */
  --wc-sales-point-spacing-3: 0.75rem;
  /* 12px */
  --wc-sales-point-spacing-4: 1rem;
  /* 16px */
  --wc-sales-point-spacing-5: 1.25rem;
  /* 20px */
  --wc-sales-point-spacing-6: 1.5rem;
  /* 24px */
  --wc-sales-point-spacing-8: 2rem;
  /* 32px */
  --wc-sales-point-spacing-10: 2.5rem;
  /* 40px */
  --wc-sales-point-spacing-12: 3rem;
  /* 48px */
  --wc-sales-point-spacing-16: 4rem;
  /* 64px */
  --wc-sales-point-spacing-20: 5rem;
  /* 80px */

  /* ==========================================
     BORDER RADIUS - Rounded Corners
     ========================================== */
  --wc-sales-point-radius-none: 0;
  --wc-sales-point-radius-sm: 0.125rem;
  /* 2px */
  --wc-sales-point-radius-base: 0.25rem;
  /* 4px */
  --wc-sales-point-radius-md: 0.375rem;
  /* 6px */
  --wc-sales-point-radius-lg: 0.5rem;
  /* 8px */
  --wc-sales-point-radius-xl: 0.75rem;
  /* 12px */
  --wc-sales-point-radius-2xl: 1rem;
  /* 16px */
  --wc-sales-point-radius-full: 9999px;

  /* ==========================================
     Z-INDEX - Layering System
     ========================================== */
  --wc-sales-point-z-index-dropdown: 1000;
  --wc-sales-point-z-index-sticky: 1020;
  --wc-sales-point-z-index-fixed: 1030;
  --wc-sales-point-z-index-modal-backdrop: 100000;
  --wc-sales-point-z-index-modal: 100010;
  --wc-sales-point-z-index-popover: 1060;
  --wc-sales-point-z-index-tooltip: 1070;
  --wc-sales-point-z-index-notification: 1080;

  /* ==========================================
     TRANSITIONS - Animation Timing
     ========================================== */
  --wc-sales-point-transition-speed-fast: 150ms;
  --wc-sales-point-transition-speed-base: 300ms;
  --wc-sales-point-transition-speed-slow: 500ms;
  --wc-sales-point-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);

  /* ==========================================
     LAYOUT - Breakpoints (for reference)
     ========================================== */
  --wc-sales-point-breakpoint-xs: 0;
  --wc-sales-point-breakpoint-sm: 576px;
  --wc-sales-point-breakpoint-md: 768px;
  --wc-sales-point-breakpoint-lg: 992px;
  --wc-sales-point-breakpoint-xl: 1200px;
  --wc-sales-point-breakpoint-xxl: 1400px;

  /* ==========================================
     LAYOUT - Container Widths
     ========================================== */
  --wc-sales-point-container-sm: 540px;
  --wc-sales-point-container-md: 720px;
  --wc-sales-point-container-lg: 960px;
  --wc-sales-point-container-xl: 1140px;
  --wc-sales-point-container-xxl: 1320px;

  /* ==========================================
     COMPONENTS - Specific Sizes
     ========================================== */
  --wc-sales-point-header-height: 66px;
  --wc-sales-point-sidebar-width: 240px;
  --wc-sales-point-sidebar-collapsed-width: 70px;

  --wc-sales-point-button-height-sm: 32px;
  --wc-sales-point-button-height-base: 38px;
  --wc-sales-point-button-height-lg: 46px;

  --wc-sales-point-input-height-sm: 28px;
  --wc-sales-point-input-height-base: 32px;
  --wc-sales-point-input-height-md: 60px;
  --wc-sales-point-input-height-lg: 100px;

  --wc-sales-point-modal-width-sm: 400px;
  --wc-sales-point-modal-width-base: 600px;
  --wc-sales-point-modal-width-lg: 800px;
  --wc-sales-point-modal-width-xl: 1100px;

  /* ==========================================
     SCROLLBAR - Custom Styling
     ========================================== */
  --wc-sales-point-scrollbar-width: 8px;
  --wc-sales-point-scrollbar-track: #F3F4F6;
  --wc-sales-point-scrollbar-thumb: #D1D5DB;
  --wc-sales-point-scrollbar-thumb-hover: #9CA3AF;

  /* ==========================================
     FOCUS STATES - Accessibility
     ========================================== */
  --wc-sales-point-focus-ring-width: 2px;
  --wc-sales-point-focus-ring-color: rgba(var(--wc-sales-point-primary-rgb), 0.5);
  --wc-sales-point-focus-ring-danger: rgba(220, 53, 69, 0.25);
  --wc-sales-point-focus-ring-success: rgba(40, 167, 69, 0.25);
  --wc-sales-point-focus-ring-offset: 2px;

  /* Neutral Scale (Grays) */
  --wc-sales-point-gray-50: #f9fafb;
  --wc-sales-point-gray-100: #f3f4f6;
  --wc-sales-point-gray-200: #e5e7eb;
  --wc-sales-point-gray-300: #d1d5db;
  --wc-sales-point-gray-400: #9ca3af;
  --wc-sales-point-gray-500: #6b7280;
  --wc-sales-point-gray-600: #4b5563;
  --wc-sales-point-gray-700: #374151;
  --wc-sales-point-gray-800: #1f2937;
  --wc-sales-point-gray-900: #111827;
}