/* 
 * Marketing tokens for Growth landing page
 * Maps to Tailwind v4 theme extension for consistent design
 * Usage: Use these tokens for colors, radius, shadows, and typography
 * throughout the marketing/landing experience
 */

:root {
  /* Colors - Growth Brand Palette */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-900: #1e3a8a;
  
  --color-growth-accent: #10b981;
  --color-growth-accent-dark: #059669;
  
  /* Semantic Colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  
  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  
  /* Typography */
  --font-marketing-hero: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-marketing-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  
  /* Spacing */
  --space-marketing-section: 4rem;
  --space-marketing-section-mobile: 2.5rem;
  
  /* Animation */
  --duration-fast: 150ms;
  --duration-medium: 300ms;
  --duration-slow: 500ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
}

/* Dark mode overrides */
.dark {
  --color-primary-50: #1e3a8a;
  --color-primary-100: #1d4ed8;
}

/* ========================================================================
   KAPSO-STYLE PRICING PAGE
   ======================================================================== */

.pricing-dark-bg {
  background-color: #050505;
}

.pricing-card-bg {
  background-color: #0f0f0f;
}

.pricing-green {
  color: #00ff87;
}

.pricing-green-bg {
  background-color: #00ff87;
}

.pricing-green-border {
  border-color: #00ff87;
}

.pricing-green-glow {
  background-color: #00ff87;
  opacity: 0.08;
}

.pricing-green-badge-shadow {
  box-shadow: 0 0 20px rgba(0, 255, 135, 0.4);
}

.pricing-green-card-shadow {
  box-shadow: 0 0 40px -10px rgba(0, 255, 135, 0.15);
}

.pricing-green-check-bg {
  background-color: rgba(0, 255, 135, 0.1);
}

.pricing-green-check-bg-hover:hover {
  background-color: rgba(0, 255, 135, 0.2);
}

.pricing-green-gradient {
  background-image: linear-gradient(
    to bottom right,
    rgba(0, 255, 135, 0.2),
    rgba(0, 255, 135, 0.05)
  );
}

.pricing-green-gradient-border {
  border: 1px solid rgba(0, 255, 135, 0.2);
}

::selection {
  background-color: #00ff87;
  color: #000;
}