/**
 * SnapSell AI - Brand CSS Variables
 * Version: 1.0
 * Generated: 2026-01-22
 *
 * Usage: @import url('brand-variables.css');
 */

:root {
  /* PRIMARY PALETTE - Logo Colors */
  --snapsell-primary: #2d9c6f;
  --snapsell-primary-rgb: 45, 156, 111;

  --snapsell-teal: #7aca91;
  --snapsell-teal-rgb: 122, 202, 145;

  --snapsell-blue: #75bae9;
  --snapsell-blue-rgb: 117, 186, 233;

  --snapsell-detail: #7ead9e;
  --snapsell-detail-rgb: 126, 173, 158;

  /* TEXT COLORS */
  --snapsell-text: #1F2937;
  --snapsell-text-rgb: 31, 41, 55;

  --snapsell-text-muted: #666666;
  --snapsell-text-light: #999999;
  --snapsell-text-on-dark: #FFFFFF;

  /* BACKGROUNDS */
  --snapsell-background: #FFFFFF;
  --snapsell-background-alt: #FAFAFA;
  --snapsell-background-dark: #191923;
  --snapsell-background-dark-alt: #2a2a3d;

  /* BORDERS */
  --snapsell-border: #E5E7EB;
  --snapsell-border-dark: #374151;

  /* GRADIENTS */
  --snapsell-gradient: linear-gradient(135deg, #7aca91 0%, #75bae9 100%);
  --snapsell-gradient-dark: linear-gradient(135deg, #191923 0%, #2a2a3d 100%);

  /* TYPOGRAPHY */
  --snapsell-font-display: Impact, 'Bebas Neue', Helvetica, sans-serif;
  --snapsell-font-body: Helvetica, Arial, sans-serif;

  /* FONT SIZES */
  --snapsell-text-xs: 0.75rem;
  --snapsell-text-sm: 0.875rem;
  --snapsell-text-base: 1rem;
  --snapsell-text-lg: 1.125rem;
  --snapsell-text-xl: 1.25rem;
  --snapsell-text-2xl: 1.5rem;
  --snapsell-text-3xl: 1.875rem;
  --snapsell-text-4xl: 2.25rem;

  /* BORDER RADIUS */
  --snapsell-radius-sm: 0.25rem;
  --snapsell-radius-md: 0.5rem;
  --snapsell-radius-lg: 0.75rem;
  --snapsell-radius-xl: 1rem;
  --snapsell-radius-full: 9999px;

  /* SHADOWS */
  --snapsell-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --snapsell-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --snapsell-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* TRANSITIONS */
  --snapsell-transition-fast: 150ms ease;
  --snapsell-transition-normal: 200ms ease;
}

/* UTILITY CLASSES */
.snapsell-gradient-bg {
  background: var(--snapsell-gradient);
}

.snapsell-text-gradient {
  background: var(--snapsell-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.snapsell-btn-primary {
  background: var(--snapsell-primary);
  color: white;
  border-radius: var(--snapsell-radius-md);
  padding: 0.75rem 1.5rem;
  font-family: var(--snapsell-font-body);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: var(--snapsell-transition-normal);
}

.snapsell-btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.snapsell-btn-gradient {
  background: var(--snapsell-gradient);
  color: white;
  border-radius: var(--snapsell-radius-md);
  padding: 0.75rem 1.5rem;
  font-family: var(--snapsell-font-body);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: var(--snapsell-transition-normal);
}

.snapsell-btn-gradient:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.snapsell-card {
  background-color: white;
  border-radius: var(--snapsell-radius-xl);
  box-shadow: var(--snapsell-shadow-md);
  padding: 1.5rem;
}