/* Petals of Life - Blue Fermion Labs Brand Variables */
/* Based on Blue Fermion Brand Guidelines */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap');

:root {
  /* ============================================
     Blue Fermion Foundation Colors
     ============================================ */

  /* Primary - Blue Fermion Teal */
  --bf-teal: #1DA7A0;
  --bf-teal-dark: #148B85;
  --bf-teal-light: #2BC4BC;

  /* Secondary - Blue Fermion Navy */
  --bf-navy: #123C6B;
  --bf-navy-dark: #0A2847;
  --bf-navy-light: #1E5494;

  /* Labs Accent - Orange */
  --bf-orange: #FF6B35;
  --bf-orange-dark: #E55A28;
  --bf-orange-light: #FF8355;

  /* Additional Accents */
  --bf-gold: #FFB700;
  --bf-purple: #7B68EE;

  /* ============================================
     Petals of Life Organic/Growth Palette
     ============================================ */

  --petal-sage: #8FBC8F;
  --petal-rose: #E8B4B8;
  --petal-cream: #FFF8F0;
  --petal-warm-white: #FFFAF5;
  --petal-mint: #E8F4F3;
  --petal-soft-green: #D4EDE9;

  /* ============================================
     Neutral Palette
     ============================================ */

  --gray-50: #FAFBFC;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* ============================================
     Semantic Colors
     ============================================ */

  --success: #10B981;
  --warning: #F59E0B;
  --error: #EF4444;
  --info: #3B82F6;

  /* ============================================
     Gradients
     ============================================ */

  /* Hero gradient - Warm sunrise/growth feeling */
  --gradient-hero: linear-gradient(135deg, #FFF8F0 0%, #E8F4F3 50%, #D4EDE9 100%);

  /* Primary CTA gradient (Teal to Navy) */
  --gradient-primary: linear-gradient(135deg, #1DA7A0 0%, #123C6B 100%);

  /* Coral CTA gradient for high-emphasis actions */
  --gradient-cta: linear-gradient(135deg, #FF6B35 0%, #E55A28 100%);

  /* Cool accent gradient */
  --gradient-cool: linear-gradient(135deg, #1DA7A0 0%, #7B68EE 100%);

  /* Dark section gradient */
  --gradient-dark: linear-gradient(135deg, #0A2847 0%, #123C6B 100%);

  /* Petal glow effect */
  --gradient-petal-glow: radial-gradient(ellipse at center, rgba(43, 196, 188, 0.2) 0%, transparent 70%);

  /* ============================================
     Typography
     ============================================ */

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Fira Code', Monaco, Menlo, monospace;

  /* Type Scale (Fluid/Responsive) */
  --text-display: clamp(3rem, 2.5rem + 3vw, 4.5rem);
  --text-h1: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
  --text-h2: clamp(2rem, 1.7rem + 1.5vw, 2.75rem);
  --text-h3: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-h4: 1.25rem;
  --text-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-body-lg: 1.25rem;
  --text-small: 0.875rem;
  --text-xs: 0.75rem;

  /* Line Heights */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* ============================================
     Spacing
     ============================================ */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ============================================
     Border Radius
     ============================================ */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ============================================
     Shadows
     ============================================ */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);

  /* Colored shadows */
  --shadow-teal: 0 10px 40px rgba(29, 167, 160, 0.3);
  --shadow-navy: 0 10px 40px rgba(18, 60, 107, 0.2);
  --shadow-coral: 0 10px 40px rgba(255, 107, 53, 0.3);

  /* ============================================
     Transitions
     ============================================ */

  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ============================================
     Z-Index Scale
     ============================================ */

  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ============================================
   Dark Mode Variables (Optional)
   ============================================ */

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: var(--bf-navy-dark);
    --bg-secondary: var(--bf-navy);
    --text-primary: var(--gray-100);
    --text-secondary: var(--gray-300);
  }
}