/**
 * Swift Commerce Frontend Design System
 * 
 * A lightweight, theme-compatible CSS framework for all frontend components.
 * Based on Tailwind CSS design tokens and shadcn/ui aesthetic.
 * 
 * All classes are prefixed with 'synk-' to avoid conflicts with themes.
 * 
 * @version 1.0.0
 * @since Swift Commerce 1.0.0
 */

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

:root {
  /* --------------------------------------------------------------------------
     1.1 Colors - Primary Palette
     Swift Commerce Brand Color (#345c72) - Teal/Blue scale
     -------------------------------------------------------------------------- */
  --sc-primary-50: #f0f7fa;
  --sc-primary-100: #e0eff5;
  --sc-primary-200: #b3d7e6;
  --sc-primary-300: #80bdd4;
  --sc-primary-400: #5a9ab8;
  --sc-primary-500: #407a96;
  --sc-primary-600: #345c72;
  --sc-primary-700: #2a4a5c;
  --sc-primary-800: #203947;
  --sc-primary-900: #162833;
  
  /* Primary shortcuts */
  --sc-primary: var(--sc-primary-600);
  --sc-primary-hover: var(--sc-primary-700);
  --sc-primary-active: var(--sc-primary-800);
  --sc-primary-light: var(--sc-primary-100);
  
  /* --------------------------------------------------------------------------
     1.2 Colors - Gray Scale
     Based on Tailwind's gray scale
     -------------------------------------------------------------------------- */
  --sc-gray-50: #f9fafb;
  --sc-gray-100: #f3f4f6;
  --sc-gray-200: #e5e7eb;
  --sc-gray-300: #d1d5db;
  --sc-gray-400: #9ca3af;
  --sc-gray-500: #6b7280;
  --sc-gray-600: #4b5563;
  --sc-gray-700: #374151;
  --sc-gray-800: #1f2937;
  --sc-gray-900: #111827;
  --sc-gray-950: #030712;
  
  /* --------------------------------------------------------------------------
     1.3 Colors - Semantic Colors
     -------------------------------------------------------------------------- */
  /* Success - Green */
  --sc-success-50: #f0fdf4;
  --sc-success-100: #dcfce7;
  --sc-success-500: #22c55e;
  --sc-success-600: #16a34a;
  --sc-success-700: #15803d;
  --sc-success: var(--sc-success-600);
  
  /* Warning - Amber */
  --sc-warning-50: #fffbeb;
  --sc-warning-100: #fef3c7;
  --sc-warning-500: #f59e0b;
  --sc-warning-600: #d97706;
  --sc-warning-700: #b45309;
  --sc-warning: var(--sc-warning-500);
  
  /* Error - Red */
  --sc-error-50: #fef2f2;
  --sc-error-100: #fee2e2;
  --sc-error-500: #ef4444;
  --sc-error-600: #dc2626;
  --sc-error-700: #b91c1c;
  --sc-error: var(--sc-error-500);
  
  /* Info - Blue */
  --sc-info-50: #eff6ff;
  --sc-info-100: #dbeafe;
  --sc-info-500: #3b82f6;
  --sc-info-600: #2563eb;
  --sc-info-700: #1d4ed8;
  --sc-info: var(--sc-info-500);
  
  /* --------------------------------------------------------------------------
     1.4 Colors - Base Colors
     -------------------------------------------------------------------------- */
  --sc-white: #ffffff;
  --sc-black: #000000;
  --sc-background: var(--sc-white);
  --sc-foreground: var(--sc-gray-900);
  --sc-muted: var(--sc-gray-500);
  --sc-muted-foreground: var(--sc-gray-400);
  --sc-border: var(--sc-gray-200);
  --sc-border-hover: var(--sc-gray-300);
  
  /* --------------------------------------------------------------------------
     1.5 Spacing Scale
     Based on Tailwind's spacing scale (4px base unit)
     -------------------------------------------------------------------------- */
  --sc-space-0: 0;
  --sc-space-px: 1px;
  --sc-space-0-5: 0.125rem;  /* 2px */
  --sc-space-1: 0.25rem;     /* 4px */
  --sc-space-1-5: 0.375rem;  /* 6px */
  --sc-space-2: 0.5rem;      /* 8px */
  --sc-space-2-5: 0.625rem;  /* 10px */
  --sc-space-3: 0.75rem;     /* 12px */
  --sc-space-3-5: 0.875rem;  /* 14px */
  --sc-space-4: 1rem;        /* 16px */
  --sc-space-5: 1.25rem;     /* 20px */
  --sc-space-6: 1.5rem;      /* 24px */
  --sc-space-7: 1.75rem;     /* 28px */
  --sc-space-8: 2rem;        /* 32px */
  --sc-space-9: 2.25rem;     /* 36px */
  --sc-space-10: 2.5rem;     /* 40px */
  --sc-space-11: 2.75rem;    /* 44px */
  --sc-space-12: 3rem;       /* 48px */
  --sc-space-14: 3.5rem;     /* 56px */
  --sc-space-16: 4rem;       /* 64px */
  --sc-space-20: 5rem;       /* 80px */
  --sc-space-24: 6rem;       /* 96px */
  
  /* --------------------------------------------------------------------------
     1.6 Typography
     -------------------------------------------------------------------------- */
  /* Font Family */
  --sc-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sc-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  
  /* Font Sizes - Using explicit pixel values for theme isolation */
  --sc-text-xs: 12px;
  --sc-text-sm: 14px;
  --sc-text-base: 16px;
  --sc-text-lg: 18px;
  --sc-text-xl: 20px;
  --sc-text-2xl: 24px;
  --sc-text-3xl: 30px;
  --sc-text-4xl: 36px;
  
  /* Line Heights */
  --sc-leading-none: 1;
  --sc-leading-tight: 1.25;
  --sc-leading-snug: 1.375;
  --sc-leading-normal: 1.5;
  --sc-leading-relaxed: 1.625;
  --sc-leading-loose: 2;
  
  /* Font Weights */
  --sc-font-thin: 100;
  --sc-font-light: 300;
  --sc-font-normal: 400;
  --sc-font-medium: 500;
  --sc-font-semibold: 600;
  --sc-font-bold: 700;
  --sc-font-extrabold: 800;
  
  /* Letter Spacing */
  --sc-tracking-tighter: -0.05em;
  --sc-tracking-tight: -0.025em;
  --sc-tracking-normal: 0;
  --sc-tracking-wide: 0.025em;
  --sc-tracking-wider: 0.05em;
  
  /* --------------------------------------------------------------------------
     1.7 Border Radius
     -------------------------------------------------------------------------- */
  --sc-radius-none: 0;
  --sc-radius-sm: 0.125rem;   /* 2px */
  --sc-radius-md: 0.375rem;   /* 6px */
  --sc-radius-lg: 0.5rem;     /* 8px */
  --sc-radius-xl: 0.75rem;    /* 12px */
  --sc-radius-2xl: 1rem;      /* 16px */
  --sc-radius-3xl: 1.5rem;    /* 24px */
  --sc-radius-full: 9999px;
  
  /* Default radius for components */
  --sc-radius: var(--sc-radius-lg);
  
  /* --------------------------------------------------------------------------
     1.8 Shadows
     -------------------------------------------------------------------------- */
  --sc-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --sc-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --sc-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --sc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --sc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --sc-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --sc-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --sc-shadow-none: 0 0 #0000;
  
  /* Focus ring shadow */
  --sc-ring-offset: 2px;
  --sc-ring-color: var(--sc-primary-400);
  --sc-ring: 0 0 0 var(--sc-ring-offset) var(--sc-background), 0 0 0 calc(var(--sc-ring-offset) + 2px) var(--sc-ring-color);
  
  /* --------------------------------------------------------------------------
     1.9 Transitions
     -------------------------------------------------------------------------- */
  --sc-transition-fast: 100ms;
  --sc-transition-normal: 150ms;
  --sc-transition-slow: 300ms;
  --sc-transition-slower: 500ms;
  
  --sc-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --sc-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --sc-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* --------------------------------------------------------------------------
     1.10 Z-Index Scale
     -------------------------------------------------------------------------- */
  --sc-z-dropdown: 1000;
  --sc-z-sticky: 1020;
  --sc-z-fixed: 1030;
  --sc-z-modal-backdrop: 1040;
  --sc-z-modal: 1050;
  --sc-z-popover: 1060;
  --sc-z-tooltip: 1070;
  --sc-z-toast: 1080;
}

/* ==========================================================================
   2. Theme Isolation Layer
   Prevents third-party themes from affecting our components
   ========================================================================== */

/* Main component containers - reset all inherited styles */
.swift-commerce-gdpr-notice,
.swift-commerce-wishlist,
.swift-commerce-ajax-search,
.swift-commerce-added-to-cart-popup,
.swift-commerce-currency-switcher,
.swift-commerce-back-in-stock,
.swift-commerce-gdpr-reopen,
[class^="Swift Commerce-"] {
  /* Reset inherited font properties */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  
  /* Reset box model */
  box-sizing: border-box !important;
  
  /* Ensure proper rendering */
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* Reset all children within our components */
.swift-commerce-gdpr-notice *,
.swift-commerce-wishlist *,
.swift-commerce-ajax-search *,
.swift-commerce-added-to-cart-popup *,
.swift-commerce-currency-switcher *,
.swift-commerce-back-in-stock *,
[class^="Swift Commerce-"] * {
  box-sizing: border-box !important;
  font-family: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

/* Ensure our buttons and inputs don't inherit theme styles */
.swift-commerce-gdpr-notice button,
.swift-commerce-gdpr-notice input,
.swift-commerce-gdpr-notice select,
.swift-commerce-gdpr-notice textarea,
[class^="Swift Commerce-"] button,
[class^="Swift Commerce-"] input,
[class^="Swift Commerce-"] select,
[class^="Swift Commerce-"] textarea {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  margin: 0 !important;
}

/* Fix checkbox appearance in all browsers */
.swift-commerce-gdpr-notice input[type="checkbox"],
[class^="Swift Commerce-"] input[type="checkbox"] {
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  appearance: checkbox !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  cursor: pointer !important;
}

/* ==========================================================================
   3. Base Reset (Scoped to .synk- elements)
   ========================================================================== */

[class*="synk-"] {
  box-sizing: border-box;
}

[class*="synk-"]::before,
[class*="synk-"]::after {
  box-sizing: border-box;
}

/* ==========================================================================
   3. Typography Classes
   ========================================================================== */

.synk-text-xs { font-size: var(--sc-text-xs); line-height: var(--sc-leading-normal); }
.synk-text-sm { font-size: var(--sc-text-sm); line-height: var(--sc-leading-normal); }
.synk-text-base { font-size: var(--sc-text-base); line-height: var(--sc-leading-normal); }
.synk-text-lg { font-size: var(--sc-text-lg); line-height: var(--sc-leading-relaxed); }
.synk-text-xl { font-size: var(--sc-text-xl); line-height: var(--sc-leading-relaxed); }
.synk-text-2xl { font-size: var(--sc-text-2xl); line-height: var(--sc-leading-tight); }
.synk-text-3xl { font-size: var(--sc-text-3xl); line-height: var(--sc-leading-tight); }
.synk-text-4xl { font-size: var(--sc-text-4xl); line-height: var(--sc-leading-tight); }

.synk-font-normal { font-weight: var(--sc-font-normal); }
.synk-font-medium { font-weight: var(--sc-font-medium); }
.synk-font-semibold { font-weight: var(--sc-font-semibold); }
.synk-font-bold { font-weight: var(--sc-font-bold); }

.synk-text-muted { color: var(--sc-muted); }
.synk-text-primary { color: var(--sc-primary); }
.synk-text-success { color: var(--sc-success); }
.synk-text-warning { color: var(--sc-warning); }
.synk-text-error { color: var(--sc-error); }

/* ==========================================================================
   4. Button Components
   ========================================================================== */

/* Base Button */
.synk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sc-space-2);
  padding: var(--sc-space-2-5) var(--sc-space-4);
  font-family: inherit;
  font-size: var(--sc-text-sm);
  font-weight: var(--sc-font-medium);
  line-height: var(--sc-leading-normal);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--sc-radius);
  cursor: pointer;
  transition: all var(--sc-transition-normal) var(--sc-ease-in-out);
  -webkit-appearance: none;
  appearance: none;
}

.synk-btn:focus-visible {
  outline: none;
  box-shadow: var(--sc-ring);
}

.synk-btn:disabled,
.synk-btn.synk-btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Button Sizes */
.synk-btn--xs {
  padding: var(--sc-space-1) var(--sc-space-2);
  font-size: var(--sc-text-xs);
  border-radius: var(--sc-radius-md);
}

.synk-btn--sm {
  padding: var(--sc-space-2) var(--sc-space-3);
  font-size: var(--sc-text-sm);
}

.synk-btn--lg {
  padding: var(--sc-space-3) var(--sc-space-6);
  font-size: var(--sc-text-base);
}

.synk-btn--xl {
  padding: var(--sc-space-4) var(--sc-space-8);
  font-size: var(--sc-text-lg);
}

/* Button - Primary (Default) */
.synk-btn--primary,
.synk-btn:not([class*="synk-btn--"]) {
  background-color: var(--sc-primary);
  color: var(--sc-white);
  border-color: var(--sc-primary);
}

.synk-btn--primary:hover,
.synk-btn:not([class*="synk-btn--"]):hover {
  background-color: var(--sc-primary-hover);
  border-color: var(--sc-primary-hover);
}

.synk-btn--primary:active,
.synk-btn:not([class*="synk-btn--"]):active {
  background-color: var(--sc-primary-active);
  border-color: var(--sc-primary-active);
}

/* Button - Secondary */
.synk-btn--secondary {
  background-color: var(--sc-gray-100);
  color: var(--sc-gray-900);
  border-color: var(--sc-gray-100);
}

.synk-btn--secondary:hover {
  background-color: var(--sc-gray-200);
  border-color: var(--sc-gray-200);
}

/* Button - Outline */
.synk-btn--outline {
  background-color: transparent;
  color: var(--sc-primary);
  border-color: var(--sc-primary);
}

.synk-btn--outline:hover {
  background-color: var(--sc-primary);
  color: var(--sc-white);
}

/* Button - Ghost */
.synk-btn--ghost {
  background-color: transparent;
  color: var(--sc-gray-700);
  border-color: transparent;
}

.synk-btn--ghost:hover {
  background-color: var(--sc-gray-100);
}

/* Button - Destructive */
.synk-btn--destructive {
  background-color: var(--sc-error);
  color: var(--sc-white);
  border-color: var(--sc-error);
}

.synk-btn--destructive:hover {
  background-color: var(--sc-error-600);
  border-color: var(--sc-error-600);
}

/* Button - Success */
.synk-btn--success {
  background-color: var(--sc-success);
  color: var(--sc-white);
  border-color: var(--sc-success);
}

.synk-btn--success:hover {
  background-color: var(--sc-success-700);
  border-color: var(--sc-success-700);
}

/* Button - Link Style */
.synk-btn--link {
  background-color: transparent;
  color: var(--sc-primary);
  border-color: transparent;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.synk-btn--link:hover {
  color: var(--sc-primary-hover);
}

/* Button - Full Width */
.synk-btn--full {
  width: 100%;
}

/* Button - Icon Only */
.synk-btn--icon {
  padding: var(--sc-space-2-5);
}

.synk-btn--icon.synk-btn--xs {
  padding: var(--sc-space-1);
}

.synk-btn--icon.synk-btn--sm {
  padding: var(--sc-space-2);
}

.synk-btn--icon.synk-btn--lg {
  padding: var(--sc-space-3);
}

/* Button - Pill Shape */
.synk-btn--pill {
  border-radius: var(--sc-radius-full);
}

/* ==========================================================================
   5. Form Elements
   ========================================================================== */

/* Input Base */
.synk-input {
  display: block;
  width: 100%;
  padding: var(--sc-space-2-5) var(--sc-space-3);
  font-family: inherit;
  font-size: var(--sc-text-sm);
  line-height: var(--sc-leading-normal);
  color: var(--sc-foreground);
  background-color: var(--sc-background);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  transition: border-color var(--sc-transition-normal) var(--sc-ease-in-out),
              box-shadow var(--sc-transition-normal) var(--sc-ease-in-out);
  -webkit-appearance: none;
  appearance: none;
}

.synk-input::placeholder {
  color: var(--sc-muted-foreground);
}

.synk-input:hover {
  border-color: var(--sc-border-hover);
}

.synk-input:focus {
  outline: none;
  border-color: var(--sc-primary);
  box-shadow: 0 0 0 3px var(--sc-primary-100);
}

.synk-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--sc-gray-50);
}

/* Input Sizes */
.synk-input--sm {
  padding: var(--sc-space-2) var(--sc-space-2-5);
  font-size: var(--sc-text-xs);
}

.synk-input--lg {
  padding: var(--sc-space-3) var(--sc-space-4);
  font-size: var(--sc-text-base);
}

/* Input States */
.synk-input--error {
  border-color: var(--sc-error);
}

.synk-input--error:focus {
  box-shadow: 0 0 0 3px var(--sc-error-100);
}

.synk-input--success {
  border-color: var(--sc-success);
}

/* Textarea */
.synk-textarea {
  min-height: 80px;
  resize: vertical;
}

/* Select */
.synk-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right var(--sc-space-3) center;
  background-repeat: no-repeat;
  background-size: 16px 12px;
  padding-right: var(--sc-space-10);
}

/* Checkbox & Radio Container */
.synk-checkbox-wrapper,
.synk-radio-wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--sc-space-2);
}

/* Checkbox */
.synk-checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-sm);
  background-color: var(--sc-background);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.synk-checkbox:checked {
  background-color: var(--sc-primary);
  border-color: var(--sc-primary);
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.synk-checkbox:focus-visible {
  outline: none;
  box-shadow: var(--sc-ring);
}

/* Radio */
.synk-radio {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-full);
  background-color: var(--sc-background);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.synk-radio:checked {
  border-color: var(--sc-primary);
  border-width: 5px;
}

.synk-radio:focus-visible {
  outline: none;
  box-shadow: var(--sc-ring);
}

/* Label */
.synk-label {
  display: block;
  font-size: var(--sc-text-sm);
  font-weight: var(--sc-font-medium);
  color: var(--sc-foreground);
  margin-bottom: var(--sc-space-1-5);
}

/* Help Text */
.synk-help-text {
  font-size: var(--sc-text-xs);
  color: var(--sc-muted);
  margin-top: var(--sc-space-1);
}

.synk-help-text--error {
  color: var(--sc-error);
}

/* Form Group */
.synk-form-group {
  margin-bottom: var(--sc-space-4);
}

/* ==========================================================================
   6. Card Component
   ========================================================================== */

.synk-card {
  background-color: var(--sc-background);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-xl);
  box-shadow: var(--sc-shadow-sm);
}

.synk-card--hoverable {
  transition: box-shadow var(--sc-transition-normal) var(--sc-ease-in-out),
              border-color var(--sc-transition-normal) var(--sc-ease-in-out);
}

.synk-card--hoverable:hover {
  box-shadow: var(--sc-shadow-md);
  border-color: var(--sc-border-hover);
}

.synk-card__header {
  padding: var(--sc-space-4) var(--sc-space-6);
  border-bottom: 1px solid var(--sc-border);
}

.synk-card__title {
  margin: 0;
  font-size: var(--sc-text-lg);
  font-weight: var(--sc-font-semibold);
  color: var(--sc-foreground);
  line-height: var(--sc-leading-tight);
}

.synk-card__description {
  margin: var(--sc-space-1) 0 0;
  font-size: var(--sc-text-sm);
  color: var(--sc-muted);
}

.synk-card__body {
  padding: var(--sc-space-6);
}

.synk-card__footer {
  padding: var(--sc-space-4) var(--sc-space-6);
  border-top: 1px solid var(--sc-border);
  background-color: var(--sc-gray-50);
  border-radius: 0 0 var(--sc-radius-xl) var(--sc-radius-xl);
}

/* Card without sections */
.synk-card--simple {
  padding: var(--sc-space-6);
}

/* ==========================================================================
   7. Table Component
   ========================================================================== */

.synk-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg);
}

.synk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sc-text-sm);
}

.synk-table th,
.synk-table td {
  padding: var(--sc-space-3) var(--sc-space-4);
  text-align: left;
  vertical-align: middle;
}

.synk-table th {
  font-weight: var(--sc-font-medium);
  color: var(--sc-muted);
  background-color: var(--sc-gray-50);
  border-bottom: 1px solid var(--sc-border);
}

.synk-table td {
  color: var(--sc-foreground);
  border-bottom: 1px solid var(--sc-border);
}

.synk-table tbody tr:last-child td {
  border-bottom: none;
}

.synk-table tbody tr:hover {
  background-color: var(--sc-gray-50);
}

/* Striped Table */
.synk-table--striped tbody tr:nth-child(even) {
  background-color: var(--sc-gray-50);
}

/* Compact Table */
.synk-table--compact th,
.synk-table--compact td {
  padding: var(--sc-space-2) var(--sc-space-3);
}

/* ==========================================================================
   8. Badge Component
   ========================================================================== */

.synk-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-space-1);
  padding: var(--sc-space-0-5) var(--sc-space-2);
  font-size: var(--sc-text-xs);
  font-weight: var(--sc-font-medium);
  line-height: var(--sc-leading-normal);
  border-radius: var(--sc-radius-md);
  white-space: nowrap;
}

/* Badge Variants */
.synk-badge--default {
  background-color: var(--sc-gray-100);
  color: var(--sc-gray-700);
}

.synk-badge--primary {
  background-color: var(--sc-primary-100);
  color: var(--sc-primary-700);
}

.synk-badge--success {
  background-color: var(--sc-success-100);
  color: var(--sc-success-700);
}

.synk-badge--warning {
  background-color: var(--sc-warning-100);
  color: var(--sc-warning-700);
}

.synk-badge--error {
  background-color: var(--sc-error-100);
  color: var(--sc-error-700);
}

.synk-badge--info {
  background-color: var(--sc-info-100);
  color: var(--sc-info-700);
}

/* Outline Badges */
.synk-badge--outline {
  background-color: transparent;
  border: 1px solid var(--sc-border);
  color: var(--sc-foreground);
}

.synk-badge--outline-primary {
  background-color: transparent;
  border: 1px solid var(--sc-primary);
  color: var(--sc-primary);
}

/* Pill Badge */
.synk-badge--pill {
  border-radius: var(--sc-radius-full);
  padding: var(--sc-space-0-5) var(--sc-space-2-5);
}

/* ==========================================================================
   9. Alert / Notice Component
   ========================================================================== */

.synk-alert {
  display: flex;
  gap: var(--sc-space-3);
  padding: var(--sc-space-4);
  border-radius: var(--sc-radius-lg);
  font-size: var(--sc-text-sm);
}

.synk-alert__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.synk-alert__content {
  flex: 1;
}

.synk-alert__title {
  font-weight: var(--sc-font-semibold);
  margin: 0 0 var(--sc-space-1);
}

.synk-alert__message {
  margin: 0;
}

/* Alert Variants */
.synk-alert--info {
  background-color: var(--sc-info-50);
  border: 1px solid var(--sc-info-100);
  color: var(--sc-info-700);
}

.synk-alert--success {
  background-color: var(--sc-success-50);
  border: 1px solid var(--sc-success-100);
  color: var(--sc-success-700);
}

.synk-alert--warning {
  background-color: var(--sc-warning-50);
  border: 1px solid var(--sc-warning-100);
  color: var(--sc-warning-700);
}

.synk-alert--error {
  background-color: var(--sc-error-50);
  border: 1px solid var(--sc-error-100);
  color: var(--sc-error-700);
}

/* ==========================================================================
   10. Modal / Dialog Component
   ========================================================================== */

.synk-modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgb(0 0 0 / 0.5);
  z-index: var(--sc-z-modal-backdrop);
  animation: synk-fade-in var(--sc-transition-normal) var(--sc-ease-out);
}

.synk-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 500px;
  max-height: calc(100vh - var(--sc-space-8));
  background-color: var(--sc-background);
  border-radius: var(--sc-radius-xl);
  box-shadow: var(--sc-shadow-xl);
  z-index: var(--sc-z-modal);
  overflow: hidden;
  animation: synk-scale-in var(--sc-transition-normal) var(--sc-ease-out);
}

.synk-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sc-space-4) var(--sc-space-6);
  border-bottom: 1px solid var(--sc-border);
}

.synk-modal__title {
  margin: 0;
  font-size: var(--sc-text-lg);
  font-weight: var(--sc-font-semibold);
}

.synk-modal__close {
  padding: var(--sc-space-1);
  color: var(--sc-muted);
  background: transparent;
  border: none;
  border-radius: var(--sc-radius-md);
  cursor: pointer;
  transition: color var(--sc-transition-fast);
}

.synk-modal__close:hover {
  color: var(--sc-foreground);
}

.synk-modal__body {
  padding: var(--sc-space-6);
  overflow-y: auto;
}

.synk-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sc-space-3);
  padding: var(--sc-space-4) var(--sc-space-6);
  border-top: 1px solid var(--sc-border);
  background-color: var(--sc-gray-50);
}

/* Modal Sizes */
.synk-modal--sm { max-width: 400px; }
.synk-modal--lg { max-width: 700px; }
.synk-modal--xl { max-width: 900px; }
.synk-modal--full { max-width: calc(100vw - var(--sc-space-8)); }

/* ==========================================================================
   11. Popup / Popover Component
   ========================================================================== */

.synk-popup {
  position: absolute;
  min-width: 200px;
  background-color: var(--sc-background);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg);
  box-shadow: var(--sc-shadow-lg);
  z-index: var(--sc-z-popover);
  animation: synk-fade-in var(--sc-transition-fast) var(--sc-ease-out);
}

.synk-popup__content {
  padding: var(--sc-space-4);
}

.synk-popup__arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--sc-background);
  border: 1px solid var(--sc-border);
  transform: rotate(45deg);
}

/* ==========================================================================
   12. Toast / Notification Component
   ========================================================================== */

.synk-toast-container {
  position: fixed;
  bottom: var(--sc-space-6);
  right: var(--sc-space-6);
  z-index: var(--sc-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-3);
}

.synk-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sc-space-3);
  min-width: 300px;
  max-width: 420px;
  padding: var(--sc-space-4);
  background-color: var(--sc-background);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg);
  box-shadow: var(--sc-shadow-lg);
  animation: synk-slide-in-right var(--sc-transition-slow) var(--sc-ease-out);
}

.synk-toast--success {
  border-left: 4px solid var(--sc-success);
}

.synk-toast--error {
  border-left: 4px solid var(--sc-error);
}

.synk-toast--warning {
  border-left: 4px solid var(--sc-warning);
}

.synk-toast--info {
  border-left: 4px solid var(--sc-info);
}

.synk-toast__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.synk-toast__content {
  flex: 1;
}

.synk-toast__title {
  font-weight: var(--sc-font-semibold);
  font-size: var(--sc-text-sm);
  color: var(--sc-foreground);
}

.synk-toast__message {
  font-size: var(--sc-text-sm);
  color: var(--sc-muted);
  margin-top: var(--sc-space-1);
}

.synk-toast__close {
  flex-shrink: 0;
  padding: var(--sc-space-1);
  color: var(--sc-muted);
  background: transparent;
  border: none;
  border-radius: var(--sc-radius-md);
  cursor: pointer;
}

.synk-toast__close:hover {
  color: var(--sc-foreground);
}

/* ==========================================================================
   13. Loader / Spinner Component
   ========================================================================== */

.synk-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--sc-border);
  border-top-color: var(--sc-primary);
  border-radius: var(--sc-radius-full);
  animation: synk-spin 0.6s linear infinite;
}

.synk-spinner--sm { width: 14px; height: 14px; border-width: 1.5px; }
.synk-spinner--lg { width: 28px; height: 28px; border-width: 3px; }
.synk-spinner--xl { width: 40px; height: 40px; border-width: 4px; }

/* Loading Overlay */
.synk-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(255 255 255 / 0.8);
  border-radius: inherit;
  z-index: 10;
}

/* ==========================================================================
   14. Dropdown Menu Component
   ========================================================================== */

.synk-dropdown {
  position: relative;
  display: inline-block;
}

.synk-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  margin-top: var(--sc-space-1);
  padding: var(--sc-space-1);
  background-color: var(--sc-background);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg);
  box-shadow: var(--sc-shadow-lg);
  z-index: var(--sc-z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--sc-transition-fast),
              visibility var(--sc-transition-fast),
              transform var(--sc-transition-fast);
}

.synk-dropdown--open .synk-dropdown__menu,
.synk-dropdown:focus-within .synk-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.synk-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--sc-space-2);
  width: 100%;
  padding: var(--sc-space-2) var(--sc-space-3);
  font-size: var(--sc-text-sm);
  color: var(--sc-foreground);
  background: transparent;
  border: none;
  border-radius: var(--sc-radius-md);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--sc-transition-fast);
}

.synk-dropdown__item:hover {
  background-color: var(--sc-gray-100);
}

.synk-dropdown__item--destructive {
  color: var(--sc-error);
}

.synk-dropdown__item--destructive:hover {
  background-color: var(--sc-error-50);
}

.synk-dropdown__divider {
  height: 1px;
  margin: var(--sc-space-1) 0;
  background-color: var(--sc-border);
}

/* ==========================================================================
   15. Icon Helpers
   ========================================================================== */

.synk-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.synk-icon--xs { width: 12px; height: 12px; }
.synk-icon--sm { width: 16px; height: 16px; }
.synk-icon--md { width: 20px; height: 20px; }
.synk-icon--lg { width: 24px; height: 24px; }
.synk-icon--xl { width: 32px; height: 32px; }

.synk-icon svg {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   16. Layout Utilities
   ========================================================================== */

/* Flexbox */
.synk-flex { display: flex; }
.synk-inline-flex { display: inline-flex; }
.synk-flex-row { flex-direction: row; }
.synk-flex-col { flex-direction: column; }
.synk-flex-wrap { flex-wrap: wrap; }
.synk-items-start { align-items: flex-start; }
.synk-items-center { align-items: center; }
.synk-items-end { align-items: flex-end; }
.synk-justify-start { justify-content: flex-start; }
.synk-justify-center { justify-content: center; }
.synk-justify-end { justify-content: flex-end; }
.synk-justify-between { justify-content: space-between; }
.synk-flex-1 { flex: 1 1 0%; }
.synk-flex-shrink-0 { flex-shrink: 0; }

/* Gap */
.synk-gap-1 { gap: var(--sc-space-1); }
.synk-gap-2 { gap: var(--sc-space-2); }
.synk-gap-3 { gap: var(--sc-space-3); }
.synk-gap-4 { gap: var(--sc-space-4); }
.synk-gap-6 { gap: var(--sc-space-6); }
.synk-gap-8 { gap: var(--sc-space-8); }

/* Grid */
.synk-grid { display: grid; }
.synk-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.synk-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.synk-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Width */
.synk-w-full { width: 100%; }
.synk-w-auto { width: auto; }
.synk-max-w-xs { max-width: 20rem; }
.synk-max-w-sm { max-width: 24rem; }
.synk-max-w-md { max-width: 28rem; }
.synk-max-w-lg { max-width: 32rem; }
.synk-max-w-xl { max-width: 36rem; }

/* ==========================================================================
   17. Spacing Utilities
   ========================================================================== */

/* Margin */
.synk-m-0 { margin: 0; }
.synk-m-1 { margin: var(--sc-space-1); }
.synk-m-2 { margin: var(--sc-space-2); }
.synk-m-3 { margin: var(--sc-space-3); }
.synk-m-4 { margin: var(--sc-space-4); }
.synk-m-auto { margin: auto; }

.synk-mt-0 { margin-top: 0; }
.synk-mt-1 { margin-top: var(--sc-space-1); }
.synk-mt-2 { margin-top: var(--sc-space-2); }
.synk-mt-3 { margin-top: var(--sc-space-3); }
.synk-mt-4 { margin-top: var(--sc-space-4); }
.synk-mt-6 { margin-top: var(--sc-space-6); }

.synk-mb-0 { margin-bottom: 0; }
.synk-mb-1 { margin-bottom: var(--sc-space-1); }
.synk-mb-2 { margin-bottom: var(--sc-space-2); }
.synk-mb-3 { margin-bottom: var(--sc-space-3); }
.synk-mb-4 { margin-bottom: var(--sc-space-4); }
.synk-mb-6 { margin-bottom: var(--sc-space-6); }

.synk-ml-auto { margin-left: auto; }
.synk-mr-auto { margin-right: auto; }

/* Padding */
.synk-p-0 { padding: 0; }
.synk-p-1 { padding: var(--sc-space-1); }
.synk-p-2 { padding: var(--sc-space-2); }
.synk-p-3 { padding: var(--sc-space-3); }
.synk-p-4 { padding: var(--sc-space-4); }
.synk-p-6 { padding: var(--sc-space-6); }

.synk-px-2 { padding-left: var(--sc-space-2); padding-right: var(--sc-space-2); }
.synk-px-3 { padding-left: var(--sc-space-3); padding-right: var(--sc-space-3); }
.synk-px-4 { padding-left: var(--sc-space-4); padding-right: var(--sc-space-4); }
.synk-px-6 { padding-left: var(--sc-space-6); padding-right: var(--sc-space-6); }

.synk-py-2 { padding-top: var(--sc-space-2); padding-bottom: var(--sc-space-2); }
.synk-py-3 { padding-top: var(--sc-space-3); padding-bottom: var(--sc-space-3); }
.synk-py-4 { padding-top: var(--sc-space-4); padding-bottom: var(--sc-space-4); }
.synk-py-6 { padding-top: var(--sc-space-6); padding-bottom: var(--sc-space-6); }

/* ==========================================================================
   18. Visual Utilities
   ========================================================================== */

/* Border */
.synk-border { border: 1px solid var(--sc-border); }
.synk-border-0 { border: none; }
.synk-border-t { border-top: 1px solid var(--sc-border); }
.synk-border-b { border-bottom: 1px solid var(--sc-border); }

/* Border Radius */
.synk-rounded-none { border-radius: 0; }
.synk-rounded-sm { border-radius: var(--sc-radius-sm); }
.synk-rounded { border-radius: var(--sc-radius); }
.synk-rounded-md { border-radius: var(--sc-radius-md); }
.synk-rounded-lg { border-radius: var(--sc-radius-lg); }
.synk-rounded-xl { border-radius: var(--sc-radius-xl); }
.synk-rounded-full { border-radius: var(--sc-radius-full); }

/* Shadow */
.synk-shadow-none { box-shadow: var(--sc-shadow-none); }
.synk-shadow-sm { box-shadow: var(--sc-shadow-sm); }
.synk-shadow { box-shadow: var(--sc-shadow-md); }
.synk-shadow-lg { box-shadow: var(--sc-shadow-lg); }

/* Background */
.synk-bg-white { background-color: var(--sc-white); }
.synk-bg-gray-50 { background-color: var(--sc-gray-50); }
.synk-bg-gray-100 { background-color: var(--sc-gray-100); }
.synk-bg-primary { background-color: var(--sc-primary); }
.synk-bg-transparent { background-color: transparent; }

/* ==========================================================================
   19. Interactive Utilities
   ========================================================================== */

.synk-cursor-pointer { cursor: pointer; }
.synk-cursor-not-allowed { cursor: not-allowed; }
.synk-select-none { user-select: none; }
.synk-pointer-events-none { pointer-events: none; }

/* Transition */
.synk-transition {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: var(--sc-transition-normal);
  transition-timing-function: var(--sc-ease-in-out);
}

/* Opacity */
.synk-opacity-0 { opacity: 0; }
.synk-opacity-50 { opacity: 0.5; }
.synk-opacity-100 { opacity: 1; }

/* ==========================================================================
   20. Visibility Utilities
   ========================================================================== */

.synk-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;
}

.synk-hidden { display: none; }
.synk-invisible { visibility: hidden; }
.synk-visible { visibility: visible; }

/* ==========================================================================
   21. Animations
   ========================================================================== */

@keyframes synk-spin {
  to { transform: rotate(360deg); }
}

@keyframes synk-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes synk-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes synk-scale-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes synk-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes synk-slide-in-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes synk-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.synk-animate-spin { animation: synk-spin 1s linear infinite; }
.synk-animate-fade-in { animation: synk-fade-in var(--sc-transition-normal) var(--sc-ease-out); }
.synk-animate-pulse { animation: synk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* ==========================================================================
   22. Responsive Utilities
   ========================================================================== */

/* Mobile First - Show/Hide */
.synk-sm\:hidden { display: none; }
.synk-sm\:block { display: block; }
.synk-sm\:flex { display: flex; }

@media (min-width: 640px) {
  .synk-sm\:hidden { display: none; }
  .synk-sm\:block { display: block; }
  .synk-sm\:flex { display: flex; }
}

@media (min-width: 768px) {
  .synk-md\:hidden { display: none; }
  .synk-md\:block { display: block; }
  .synk-md\:flex { display: flex; }
  .synk-md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .synk-md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .synk-lg\:hidden { display: none; }
  .synk-lg\:block { display: block; }
  .synk-lg\:flex { display: flex; }
  .synk-lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .synk-lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   23. Print Utilities
   ========================================================================== */

@media print {
  .synk-print\:hidden { display: none !important; }
}

/* ==========================================================================
   End of Swift Commerce Frontend Design System
   ========================================================================== */