@custom-variant dark (&:is(.dark *));

:root {
  --font-size: 14px;
  --background: #ffffff;
  --foreground: oklch(0.145 0 0);
  
  /* Brand Colors */
  --brand-teal: #4CC6C6;
  --brand-coral: #F47474;
  --brand-yellow: #FFD93D;
  --brand-light-green: #6BCF7F;
  --brand-violet: #A78BFA;
  --brand-purple: #C084FC;
  
  /* Gradient Definitions */
  --gradient-primary: linear-gradient(135deg, #4CC6C6 0%, #6BCF7F 50%, #FFD93D 100%);
  --gradient-secondary: linear-gradient(135deg, #F47474 0%, #C084FC 50%, #A78BFA 100%);
  --gradient-accent: linear-gradient(135deg, #FFD93D 0%, #6BCF7F 100%);
  --gradient-vibrant: linear-gradient(135deg, #4CC6C6 0%, #A78BFA 50%, #F47474 100%);
  --gradient-cool: linear-gradient(135deg, #4CC6C6 0%, #6BCF7F 50%, #A78BFA 100%);
  --gradient-warm: linear-gradient(135deg, #F47474 0%, #FFD93D 100%);
  
  /* Mobile-first responsive typography */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 0.875rem; /* 14px on mobile */
  --text-lg: 1rem;       /* 16px on mobile */
  --text-xl: 1.125rem;   /* 18px on mobile */
  --text-2xl: 1.25rem;   /* 20px on mobile */
  --text-3xl: 1.5rem;    /* 24px on mobile */
  --text-4xl: 1.75rem;   /* 28px on mobile */
  --text-5xl: 2rem;      /* 32px on mobile */
  --card: #ffffff;
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: #030213;
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.95 0.0058 264.53);
  --secondary-foreground: #030213;
  --muted: #ececf0;
  --muted-foreground: #717182;
  --accent: #e9ebef;
  --accent-foreground: #030213;
  --destructive: #d4183d;
  --destructive-foreground: #ffffff;
  --border: rgba(0, 0, 0, 0.1);
  --input: transparent;
  --input-background: #f3f3f5;
  --switch-background: #cbced4;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: #030213;
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-input-background: var(--input-background);
  --color-switch-background: var(--switch-background);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
  }
}

/**
 * Base typography. This is not applied to elements which have an ancestor with a Tailwind text class.
 */
@layer base {
  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) {
    h1 {
      font-size: var(--text-3xl);
      font-weight: var(--font-weight-medium);
      line-height: 1.2;
    }

    h2 {
      font-size: var(--text-2xl);
      font-weight: var(--font-weight-medium);
      line-height: 1.3;
    }

    h3 {
      font-size: var(--text-xl);
      font-weight: var(--font-weight-medium);
      line-height: 1.4;
    }

    h4 {
      font-size: var(--text-lg);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    h5 {
      font-size: var(--text-base);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    p {
      font-size: var(--text-base);
      font-weight: var(--font-weight-normal);
      line-height: 1.6;
    }

    label {
      font-size: var(--text-sm);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    button {
      font-size: var(--text-sm);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    input {
      font-size: var(--text-base);
      font-weight: var(--font-weight-normal);
      line-height: 1.5;
    }

    textarea {
      font-size: var(--text-base);
      font-weight: var(--font-weight-normal);
      line-height: 1.6;
    }
  }
}

/* Mobile-optimized spacing and readability */
@layer utilities {
  .text-responsive-hero {
    font-size: clamp(1.75rem, 5vw, 3rem);
    line-height: 1.1;
  }
  
  .text-responsive-heading {
    font-size: clamp(1.25rem, 3vw, 2rem);
    line-height: 1.2;
  }
  
  .text-responsive-subheading {
    font-size: clamp(1rem, 2vw, 1.5rem);
    line-height: 1.4;
  }
  
  .text-responsive-body {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.6;
  }
  
  /* Better mobile readability */
  .mobile-optimized {
    font-size: 0.875rem;
    line-height: 1.6;
  }
  
  @media (min-width: 768px) {
    .mobile-optimized {
      font-size: 1rem;
      line-height: 1.7;
    }
  }
  
  /* Premium Gradient Buttons */
  .btn-gradient-primary {
    background: var(--gradient-primary);
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(76, 198, 198, 0.3);
    transition: all 0.3s ease;
  }
  
  .btn-gradient-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(76, 198, 198, 0.4), 0 0 20px rgba(107, 207, 127, 0.3);
  }
  
  .btn-gradient-secondary {
    background: var(--gradient-secondary);
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(244, 116, 116, 0.3);
    transition: all 0.3s ease;
  }
  
  .btn-gradient-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(244, 116, 116, 0.4), 0 0 20px rgba(192, 132, 252, 0.3);
  }
  
  .btn-gradient-vibrant {
    background: var(--gradient-vibrant);
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(76, 198, 198, 0.3);
    transition: all 0.3s ease;
  }
  
  .btn-gradient-vibrant:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(167, 139, 250, 0.4), 0 0 20px rgba(244, 116, 116, 0.3);
  }
  
  .btn-gradient-cool {
    background: var(--gradient-cool);
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(76, 198, 198, 0.3);
    transition: all 0.3s ease;
  }
  
  .btn-gradient-cool:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(76, 198, 198, 0.4), 0 0 20px rgba(167, 139, 250, 0.3);
  }
  
  .btn-gradient-warm {
    background: var(--gradient-warm);
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(244, 116, 116, 0.3);
    transition: all 0.3s ease;
  }
  
  .btn-gradient-warm:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(244, 116, 116, 0.4), 0 0 20px rgba(255, 217, 61, 0.3);
  }
  
  /* Gradient backgrounds for sections */
  .bg-gradient-primary {
    background: var(--gradient-primary);
  }
  
  .bg-gradient-secondary {
    background: var(--gradient-secondary);
  }
  
  .bg-gradient-vibrant {
    background: var(--gradient-vibrant);
  }
  
  .bg-gradient-cool {
    background: var(--gradient-cool);
  }
  
  .bg-gradient-warm {
    background: var(--gradient-warm);
  }
  
  /* Glow effects */
  .glow-teal {
    box-shadow: 0 0 20px rgba(76, 198, 198, 0.5), 0 0 40px rgba(76, 198, 198, 0.3);
  }
  
  .glow-coral {
    box-shadow: 0 0 20px rgba(244, 116, 116, 0.5), 0 0 40px rgba(244, 116, 116, 0.3);
  }
  
  .glow-yellow {
    box-shadow: 0 0 20px rgba(255, 217, 61, 0.5), 0 0 40px rgba(255, 217, 61, 0.3);
  }
  
  .glow-green {
    box-shadow: 0 0 20px rgba(107, 207, 127, 0.5), 0 0 40px rgba(107, 207, 127, 0.3);
  }
  
  .glow-violet {
    box-shadow: 0 0 20px rgba(167, 139, 250, 0.5), 0 0 40px rgba(167, 139, 250, 0.3);
  }
  
  .glow-purple {
    box-shadow: 0 0 20px rgba(192, 132, 252, 0.5), 0 0 40px rgba(192, 132, 252, 0.3);
  }
}

html {
  font-size: var(--font-size);
}

/* Responsive typography for tablets and up */
@media (min-width: 640px) {
  :root {
    --font-size: 15px;
    --text-base: 0.9375rem; /* 15px */
    --text-lg: 1.0625rem;   /* 17px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    --text-4xl: 2.125rem;   /* 34px */
    --text-5xl: 2.5rem;     /* 40px */
  }
}

/* Desktop typography */
@media (min-width: 1024px) {
  :root {
    --font-size: 16px;
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    --text-4xl: 2.25rem;    /* 36px */
    --text-5xl: 3rem;       /* 48px */
  }
}

/* Large desktop typography */
@media (min-width: 1280px) {
  :root {
    --text-4xl: 2.5rem;     /* 40px */
    --text-5xl: 3.5rem;     /* 56px */
  }
}