/* ============================================================================
   LEANPIVOT DESIGN SYSTEM
   Version: 2.0.0

   GoHighLevel-inspired design system with LeanPivot brand colors
   - Primary: Teal (#26a69a) - AI Coach branding
   - Secondary: Orange (#ff9800) - Accent color
   - Accent: Blue (#29b6f6) - Supporting accent
   - Keeps Inter font family
   - Adopts 8px spacing grid
   - Implements 3-tier shadow system
   ============================================================================ */

:root {
  /* ==========================================================================
     COLOR SYSTEM
     ========================================================================== */

  /* Primary: Teal (AI Coach brand color) */
  --color-primary: #26a69a;
  --color-primary-dark: #00897b;
  --color-primary-darker: #00695c;
  --color-primary-light: #4db6ac;
  --color-primary-lighter: #80cbc4;
  --color-primary-50: #e0f2f1;
  --color-primary-100: #b2dfdb;

  /* Secondary: Orange (Accent brand color) */
  --color-secondary: #ff9800;
  --color-secondary-dark: #f57c00;
  --color-secondary-darker: #e65100;
  --color-secondary-light: #ffb74d;
  --color-secondary-lighter: #ffcc80;
  --color-secondary-50: #fff3e0;
  --color-secondary-100: #ffe0b2;

  /* Accent: Blue (Supporting accent) */
  --color-accent: #29b6f6;
  --color-accent-dark: #0288d1;
  --color-accent-light: #4fc3f7;

  /* Dashboard Accent Colors (AI Coach Dashboard palette) */
  --color-dashboard-primary: #4361ee;
  --color-dashboard-primary-dark: #3651d4;
  --color-dashboard-primary-light: #5b7aff;
  --color-dashboard-success: #38b000;
  --color-dashboard-success-dark: #2d8f00;
  --color-dashboard-success-light: #4cc71a;
  --color-dashboard-warning: #ffaa00;
  --color-dashboard-warning-dark: #e69900;
  --color-dashboard-warning-light: #ffbb33;
  --color-dashboard-danger: #e74a3b;
  --color-dashboard-danger-dark: #c73e30;
  --color-dashboard-danger-light: #f06456;
  --color-dashboard-info: #4299e1;
  --color-dashboard-info-dark: #3182ce;
  --color-dashboard-info-light: #63b3ed;

  /* Semantic Colors */
  --color-success: #0D9488;
  --color-success-dark: #0F766E;
  --color-success-light: #14B8A6;
  --color-success-bg: #CCFBF1;

  --color-warning: #F59E0B;
  --color-warning-dark: #D97706;
  --color-warning-light: #FBBF24;
  --color-warning-bg: #FEF3C7;

  --color-danger: #EF4444;
  --color-danger-dark: #DC2626;
  --color-danger-light: #F87171;
  --color-danger-bg: #FEE2E2;

  /* ==========================================================================
     TEXT COLORS (3-tier hierarchy)
     ========================================================================== */

  --text-primary: #1f2937;      /* Main content - gray-800 */
  --text-secondary: #6b7280;    /* Secondary content - gray-500 */
  --text-tertiary: #9ca3af;     /* Muted/tertiary - gray-400 */
  --text-inverse: #ffffff;      /* Text on dark backgrounds */
  --text-link: #26a69a;         /* Link color (matches primary teal) */
  --text-link-hover: #00897b;   /* Link hover (primary-dark) */

  /* ==========================================================================
     SURFACE COLORS
     ========================================================================== */

  --surface-primary: #ffffff;
  --surface-secondary: #f8fafc;   /* slate-50 */
  --surface-tertiary: #f1f5f9;    /* slate-100 */
  --border-light: #e2e8f0;        /* slate-200 */
  --border-medium: #cbd5e1;       /* slate-300 */

  /* ==========================================================================
     SHADOW SYSTEM (3 levels - Google-inspired)
     ========================================================================== */

  --shadow-light: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-heavy: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* Elevated shadows for cards on hover */
  --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-card-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* Brand-colored shadows */
  --shadow-primary: 0 4px 14px 0 rgba(38, 166, 154, 0.25);
  --shadow-secondary: 0 4px 14px 0 rgba(255, 152, 0, 0.25);
  --shadow-success: 0 4px 14px 0 rgba(13, 148, 136, 0.25);

  /* ==========================================================================
     SPACING SYSTEM (8px base grid)
     ========================================================================== */

  --spacing-0: 0;
  --spacing-1: 4px;      /* 0.5 unit */
  --spacing-2: 8px;      /* 1 unit */
  --spacing-3: 12px;     /* 1.5 units */
  --spacing-4: 16px;     /* 2 units */
  --spacing-5: 20px;     /* 2.5 units */
  --spacing-6: 24px;     /* 3 units */
  --spacing-8: 32px;     /* 4 units */
  --spacing-10: 40px;    /* 5 units */
  --spacing-12: 48px;    /* 6 units */
  --spacing-16: 64px;    /* 8 units */
  --spacing-20: 80px;    /* 10 units */
  --spacing-24: 96px;    /* 12 units */

  /* Section spacing */
  --section-padding-y: 80px;
  --section-padding-y-mobile: 48px;

  /* ==========================================================================
     TYPOGRAPHY
     ========================================================================== */

  /* Font Families (keeping Inter for brand consistency) */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Font Sizes - Extended scale with granular sizes */
  --font-size-4xs: 0.5rem;      /* 8px - Micro text */
  --font-size-3xs: 0.5625rem;   /* 9px - Fine print */
  --font-size-2xs: 0.625rem;    /* 10px - Small labels */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */
  --font-size-5xl: 3rem;        /* 48px */
  --font-size-6xl: 3.75rem;     /* 60px */
  --font-size-7xl: 4.5rem;      /* 72px - Hero headlines */

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* ==========================================================================
     BORDER RADIUS
     ========================================================================== */

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

  /* ==========================================================================
     TRANSITIONS
     ========================================================================== */

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 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;

  /* ==========================================================================
     GRADIENTS
     ========================================================================== */

  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%);
  --gradient-hero: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #475569 75%, #64748b 100%);
  --gradient-hero-overlay: radial-gradient(circle at 20% 80%, rgba(38, 166, 154, 0.3) 0%, transparent 50%),
                           radial-gradient(circle at 80% 20%, rgba(255, 152, 0, 0.2) 0%, transparent 50%),
                           radial-gradient(circle at 40% 40%, rgba(41, 182, 246, 0.2) 0%, transparent 50%);
  --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  --gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-light) 100%);

  /* Card top-border gradients */
  --gradient-border-primary: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  --gradient-border-secondary: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%);
  --gradient-border-success: linear-gradient(90deg, var(--color-success) 0%, var(--color-success-light) 100%);

  /* ==========================================================================
     BREAKPOINTS (for reference in media queries)
     ========================================================================== */

  /*
   * --breakpoint-sm: 576px;
   * --breakpoint-md: 768px;
   * --breakpoint-lg: 992px;
   * --breakpoint-xl: 1200px;
   * --breakpoint-xxl: 1400px;
   */

  /* ==========================================================================
     HERO SECTION TOKENS (Standardized across marketing pages)
     ========================================================================== */

  --hero-height-desktop: 500px;
  --hero-height-mobile: 400px;
  --hero-content-max-width: 800px;
  --hero-headline-margin: 24px;
  --hero-subheadline-margin: 32px;
  --hero-button-gap: 16px;
  --hero-padding-desktop: 100px 0 80px;
  --hero-padding-mobile: 80px 0 60px;
}

/* ============================================================================
   BASE STYLES
   ============================================================================ */

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  color: var(--text-primary);
  background-color: var(--surface-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   TYPOGRAPHY BASE
   ============================================================================ */

.ds-heading-1 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.ds-heading-2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.ds-heading-3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--text-primary);
}

.ds-heading-4 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--text-primary);
}

.ds-heading-5 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
}

/* Hero headline - uses lighter weight for elegance */
.ds-hero-headline {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-tight);
  color: var(--text-inverse);
  letter-spacing: -0.02em;
}

.ds-text-lead {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
}

.ds-text-body {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  color: var(--text-primary);
}

.ds-text-small {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--text-secondary);
}

.ds-text-caption {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Extended typography utilities for granular sizes */
.ds-text-2xs {
  font-size: var(--font-size-2xs);
  line-height: 1.4;
}

.ds-text-3xs {
  font-size: var(--font-size-3xs);
  line-height: 1.35;
}

.ds-text-4xs {
  font-size: var(--font-size-4xs);
  line-height: 1.3;
}

.ds-text-7xl {
  font-size: var(--font-size-7xl);
  line-height: var(--line-height-tight);
  letter-spacing: -0.025em;
}

/* ============================================================================
   COLOR UTILITIES
   ============================================================================ */

.ds-text-primary { color: var(--text-primary); }
.ds-text-secondary { color: var(--text-secondary); }
.ds-text-tertiary { color: var(--text-tertiary); }
.ds-text-inverse { color: var(--text-inverse); }
.ds-text-brand { color: var(--color-primary); }
.ds-text-success { color: var(--color-success); }
.ds-text-warning { color: var(--color-warning); }
.ds-text-danger { color: var(--color-danger); }

/* Dashboard accent color utilities */
.ds-text-dashboard-primary { color: var(--color-dashboard-primary); }
.ds-text-dashboard-success { color: var(--color-dashboard-success); }
.ds-text-dashboard-warning { color: var(--color-dashboard-warning); }
.ds-text-dashboard-danger { color: var(--color-dashboard-danger); }
.ds-text-dashboard-info { color: var(--color-dashboard-info); }

.ds-bg-primary { background-color: var(--surface-primary); }
.ds-bg-secondary { background-color: var(--surface-secondary); }
.ds-bg-tertiary { background-color: var(--surface-tertiary); }
.ds-bg-brand { background-color: var(--color-primary); }
.ds-bg-brand-light { background-color: var(--color-primary-50); }

/* Dashboard accent background utilities */
.ds-bg-dashboard-primary { background-color: var(--color-dashboard-primary); }
.ds-bg-dashboard-success { background-color: var(--color-dashboard-success); }
.ds-bg-dashboard-warning { background-color: var(--color-dashboard-warning); }
.ds-bg-dashboard-danger { background-color: var(--color-dashboard-danger); }
.ds-bg-dashboard-info { background-color: var(--color-dashboard-info); }

/* ============================================================================
   SPACING UTILITIES
   ============================================================================ */

.ds-mt-0 { margin-top: var(--spacing-0); }
.ds-mt-1 { margin-top: var(--spacing-1); }
.ds-mt-2 { margin-top: var(--spacing-2); }
.ds-mt-3 { margin-top: var(--spacing-3); }
.ds-mt-4 { margin-top: var(--spacing-4); }
.ds-mt-6 { margin-top: var(--spacing-6); }
.ds-mt-8 { margin-top: var(--spacing-8); }

.ds-mb-0 { margin-bottom: var(--spacing-0); }
.ds-mb-1 { margin-bottom: var(--spacing-1); }
.ds-mb-2 { margin-bottom: var(--spacing-2); }
.ds-mb-3 { margin-bottom: var(--spacing-3); }
.ds-mb-4 { margin-bottom: var(--spacing-4); }
.ds-mb-6 { margin-bottom: var(--spacing-6); }
.ds-mb-8 { margin-bottom: var(--spacing-8); }

.ds-py-section {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 991px) {
  :root {
    --font-size-5xl: 2.5rem;    /* 40px */
    --font-size-6xl: 3rem;      /* 48px */
    --section-padding-y: 64px;
  }

  .ds-hero-headline {
    font-size: var(--font-size-5xl);
  }
}

@media (max-width: 767px) {
  :root {
    --font-size-4xl: 2rem;      /* 32px */
    --font-size-5xl: 2.25rem;   /* 36px */
    --font-size-6xl: 2.5rem;    /* 40px */
    --section-padding-y: var(--section-padding-y-mobile);
  }

  .ds-hero-headline {
    font-size: var(--font-size-4xl);
  }

  .ds-heading-1 {
    font-size: var(--font-size-4xl);
  }

  .ds-heading-2 {
    font-size: var(--font-size-3xl);
  }
}

@media (max-width: 575px) {
  :root {
    --font-size-3xl: 1.5rem;    /* 24px */
    --font-size-4xl: 1.875rem;  /* 30px */
    --font-size-5xl: 2rem;      /* 32px */
  }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Skip Links - Accessibility enhancement for keyboard navigation */
.skip-links {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-primary);
  color: var(--text-inverse);
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) 0;
  transition: top var(--transition-fast);
  box-shadow: var(--shadow-medium);
}

.skip-link:focus {
  top: 0;
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.skip-link:hover {
  background: var(--color-primary-dark);
  color: var(--text-inverse);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visible for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ============================================================================
   END DESIGN SYSTEM
   ============================================================================ */