@tailwind base;
@tailwind components;
@tailwind utilities;

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    /* WhatsApp-inspired palette with accessibility for elderly */
    --background: 140 25% 98%;
    --foreground: 0 0% 15%;

    --card: 0 0% 100%;
    --card-foreground: 0 0% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 15%;

    /* WhatsApp green as primary - darkened for better contrast */
    --primary: 158 64% 38%;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 158 64% 32%;

    /* WhatsApp dark green as secondary - enhanced contrast */
    --secondary: 157 50% 28%;
    --secondary-foreground: 0 0% 100%;

    /* High contrast green for text on light backgrounds */
    --primary-text: 158 64% 28%;
    --primary-text-foreground: 0 0% 100%;

    /* WhatsApp light green bubble */
    --muted: 158 24% 94%;
    --muted-foreground: 0 0% 35%;

    /* Warm accent for cute elements */
    --accent: 45 93% 67%;
    --accent-foreground: 0 0% 15%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 158 20% 88%;
    --input: 158 24% 94%;
    --ring: 158 64% 44%;

    --radius: 1rem;
    
    /* WhatsApp-inspired gradients */
    --gradient-whatsapp: linear-gradient(135deg, hsl(158 64% 44%), hsl(157 50% 32%));
    --gradient-bubble: linear-gradient(180deg, hsl(158 24% 94%), hsl(158 20% 88%));
    --gradient-warm: linear-gradient(135deg, hsl(45 93% 67%), hsl(35 85% 70%));
    
    /* Soft shadows for cartoon feel */
    --shadow-whatsapp: 0 4px 20px -4px hsl(158 64% 44% / 0.25);
    --shadow-bubble: 0 2px 10px -2px hsl(158 20% 80% / 0.3);
    --shadow-cute: 0 8px 25px -5px hsl(45 93% 67% / 0.3);

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: 240 5.9% 10%;

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    /* WhatsApp dark theme for elderly accessibility */
    --background: 157 25% 8%;
    --foreground: 158 15% 90%;

    --card: 157 20% 12%;
    --card-foreground: 158 15% 90%;

    --popover: 157 20% 12%;
    --popover-foreground: 158 15% 90%;

    --primary: 158 64% 50%;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 158 64% 44%;
    --primary-text: 158 64% 40%;

    --secondary: 157 40% 25%;
    --secondary-foreground: 158 15% 90%;

    --muted: 157 15% 18%;
    --muted-foreground: 158 15% 70%;

    --accent: 45 80% 65%;
    --accent-foreground: 157 25% 8%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 157 15% 22%;
    --input: 157 15% 18%;
    --ring: 158 64% 50%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  /* Base styles for mobile optimization */
  * {
    @apply border-border;
  }
  
  body {
    @apply bg-background text-foreground;
    
    /* Advanced mobile optimizations */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "liga" 1, "calt" 1;
    
    /* Prevent zoom and improve touch */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
    
    /* Better font rendering */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    
    /* Hardware acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  /* Critical performance optimizations */
  img {
    content-visibility: auto;
    contain-intrinsic-size: 200px;
    -webkit-user-drag: none;
    user-drag: none;
  }

  /* Form element optimizations */
  input, textarea, select, button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 16px; /* Prevent zoom on iOS */
    -webkit-user-select: text;
    user-select: text;
  }

  /* Better text handling */
  p, div, span {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  /* Optimize button interactions */
  button {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }

  /* Advanced scrolling optimizations */
  * {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Will-change optimization for animations */
  [data-animate] {
    will-change: transform, opacity;
  }

  /* Critical loading states */
  .loading-critical {
    content-visibility: visible;
    contain: layout style paint;
  }

  /* Reduce motion for accessibility and performance */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

/* Progressive enhancement for high-end devices */
@media (min-resolution: 2dppx) {
  img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Mobile-specific optimizations */
@media (max-width: 768px) {
  /* Optimize typography hierarchy */
  h1 {
    @apply text-2xl;
    line-height: 1.2;
    font-weight: 700;
  }
  
  h2 {
    @apply text-xl;
    line-height: 1.3;
    font-weight: 600;
  }
  
  h3 {
    @apply text-lg;
    line-height: 1.4;
    font-weight: 500;
  }
  
  /* Better spacing and layout */
  .container {
    @apply px-4;
    contain: layout;
  }

  /* Optimize form elements for mobile */
  input, textarea {
    font-size: 16px;
    line-height: 1.4;
    padding: 12px;
  }

  /* Improve touch targets */
  button, a, [role="button"] {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Critical above-fold optimization */
  .hero-section {
    contain: layout style;
    content-visibility: visible;
  }

  /* Optimize images for mobile */
  img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    loading: lazy;
  }
}
}