/**
 * ✅ v10: TanieKonta.com Design Tokens
 * 
 * ZUNIFIKOWANE z tk-shared - Szary Metaliczny Motyw
 * Unified color palette for the entire ecosystem:
 * - izeetak-child theme
 * - tk-myaccount-main plugin
 * - tk-complaints plugin
 * - TK_license-MASTER plugin
 * - tk-shared library
 * 
 * ZMIANA: Primary color SZARY (#4a4e54) zamiast niebieski (#0e6bff)
 * Zachowano backward compatibility przez aliasy (--tk-color-blue)
 */
:root {
  /* Primary Colors - SZARY METALICZNY (zgodny z tk-shared) */
  --tk-color-primary: #4a4e54;
  --tk-color-primary-hover: #2d3136;
  --tk-color-primary-focus: #71757a;
  
  /* Backward compatibility - stary niebieski jako alias */
  --tk-color-blue: #0e6bff;
  --tk-color-blue-hover: #0056d2;
  
  /* Secondary Colors */
  --tk-color-secondary: #64748b;
  --tk-color-secondary-hover: #475569;
  --tk-color-secondary-light: #94a3b8;
  
  /* Success - Green */
  --tk-color-success: #059669;
  --tk-color-success-hover: #047857;
  --tk-color-success-light: #d1fae5;
  --tk-color-success-dark: #15803d;
  
  /* Error/Danger - Red */
  --tk-color-error: #dc2626;
  --tk-color-error-hover: #b91c1c;
  --tk-color-error-light: #fee2e2;
  --tk-color-danger: var(--tk-color-error); /* Alias */
  --tk-color-danger-light: var(--tk-color-error-light); /* Alias */
  
  /* Warning - Orange */
  --tk-color-warning: #d97706;
  --tk-color-warning-hover: #b45309;
  --tk-color-warning-light: #fef3c7;
  
  /* Info - Cyan */
  --tk-color-info: #0891b2;
  --tk-color-info-hover: #0e7490;
  --tk-color-info-light: #cffafe;
  
  /* Gold - Accent (złote przyciski TanieKonta.com) */
  --tk-color-gold: #eeac01;
  --tk-color-gold-light: #fbbf24;
  --tk-color-gold-dark: #d97706;
  
  /* Text colors */
  --tk-color-text: #111827;
  --tk-color-text-muted: #6b7280;
  --tk-color-text-light: #9ca3af;
  --tk-color-text-inverse: #ffffff;
  
  /* Aliasy dla backward compatibility */
  --tk-color-fg: var(--tk-color-text);
  --tk-color-fg-muted: var(--tk-color-text-muted);
  
  /* Background colors */
  --tk-color-bg: #ffffff;
  --tk-color-bg-muted: #f3f4f6;
  --tk-color-bg-gray: var(--tk-color-bg-muted); /* Alias */
  --tk-color-bg-dark: #1f2937;
  
  /* Border colors */
  --tk-color-border: #e5e7eb;
  --tk-color-border-light: #f3f4f6;
  --tk-color-border-dark: #d1d5db;
  
  /* Dark Mode (backward compatibility) */
  --tk-color-dark: #0b1220;
  --tk-color-dark-light: #111827;
  
  /* Focus & Interaction */
  --tk-focus-ring: 0 0 0 3px rgba(74, 78, 84, 0.5); /* Szary focus ring */
  --tk-focus-ring-offset: 2px;
  --tk-focus-outline: 2px solid var(--tk-color-primary);
  
  /* Spacing (zgodne z tk-shared) */
  --tk-space-1: 0.25rem;   /* 4px */
  --tk-space-2: 0.5rem;    /* 8px */
  --tk-space-3: 0.75rem;   /* 12px */
  --tk-space-4: 1rem;      /* 16px */
  --tk-space-5: 1.25rem;   /* 20px */
  --tk-space-6: 1.5rem;    /* 24px */
  --tk-space-8: 2rem;      /* 32px */
  --tk-space-10: 2.5rem;   /* 40px */
  --tk-space-12: 3rem;     /* 48px */
  
  /* Typography */
  --tk-font-size-xs: 0.75rem;    /* 12px */
  --tk-font-size-sm: 0.875rem;   /* 14px */
  --tk-font-size-base: 1rem;     /* 16px */
  --tk-font-size-lg: 1.125rem;   /* 18px */
  --tk-font-size-xl: 1.25rem;    /* 20px */
  
  --tk-font-weight-normal: 400;
  --tk-font-weight-medium: 500;
  --tk-font-weight-semibold: 600;
  --tk-font-weight-bold: 700;
  
  /* Line heights */
  --tk-line-height-tight: 1.25;
  --tk-line-height-normal: 1.5;
  --tk-line-height-relaxed: 1.625;
  
  /* Border Radius */
  --tk-radius-none: 0;
  --tk-radius-sm: 0.125rem;  /* 2px */
  --tk-radius-1: 0.25rem;    /* 4px */
  --tk-radius-2: 0.5rem;     /* 8px */
  --tk-radius-3: 0.75rem;    /* 12px */
  --tk-radius-lg: 1rem;      /* 16px */
  --tk-radius-full: 9999px;
  
  /* Shadows */
  --tk-shadow-none: none;
  --tk-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --tk-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --tk-shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --tk-shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --tk-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Transitions */
  --tk-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --tk-transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --tk-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Z-index scale */
  --tk-z-base: 0;
  --tk-z-dropdown: 1000;
  --tk-z-sticky: 1020;
  --tk-z-fixed: 1030;
  --tk-z-modal-backdrop: 1040;
  --tk-z-modal: 1050;
  --tk-z-popover: 1060;
  --tk-z-tooltip: 1070;
  --tk-z-toast: 1080;
}

/**
 * NOTA: Backward compatibility
 * Jeśli coś przestało działać po zmianie primary color:
 * 1. Użyj --tk-color-blue zamiast --tk-color-primary
 * 2. Lub dodaj własny override w komponencie
 */

.tk-btn{display:inline-block;padding:var(--tk-space-2) var(--tk-space-4);border-radius:var(--tk-radius-1);background:var(--tk-color-primary);color:#fff;text-decoration:none;box-shadow:var(--tk-shadow-1)}
.tk-btn--outline{background:transparent;color:var(--tk-color-primary);border:1px solid var(--tk-color-primary)}
.tk-badge{display:inline-block;padding:0 var(--tk-space-2);border-radius:999px;background:var(--tk-color-secondary);color:#fff;font-size:12px}