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

/* Eurosantechnikai.lt Design System
   Primary: Blue (trust, water)
   Accent: Green (eco-friendly)
   CTA: Yellow/Orange (action)
   All colors in HSL format
   
   Typography System:
   - Headings: Plus Jakarta Sans (600-800)
   - Body: Inter (400-600)
   - Scale: Major Third (1.250)
*/

@layer base {
  :root {
    /* Typography Scale - Major Third (1.250) */
    --font-size-base: 1rem; /* 16px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-h5: 1.25rem; /* 20px */
    --font-size-h4: 1.563rem; /* 25px */
    --font-size-h3: 1.953rem; /* 31px */
    --font-size-h2: 2.441rem; /* 39px */
    --font-size-h1: 3.052rem; /* 49px */
    
    /* Line Heights */
    --line-height-body: 1.6;
    --line-height-heading: 1.2;
    
    /* Letter Spacing */
    --letter-spacing-heading: -0.02em;
    --letter-spacing-body: 0;
    
    /* Max Line Length */
    --max-line-length: 70ch;
    
    --background: 210 20% 98%;
    --foreground: 210 25% 20%;

    --card: 0 0% 100%;
    --card-foreground: 210 25% 20%;

    --popover: 0 0% 100%;
    --popover-foreground: 210 25% 20%;

    /* Primary Blue - Trust, Water (darker, matching .LT logo) */
    --primary: 210 80% 35%;
    --primary-foreground: 0 0% 100%;

    /* Secondary - Light blue/gray */
    --secondary: 210 20% 96%;
    --secondary-foreground: 210 25% 20%;

    /* Muted */
    --muted: 210 20% 96%;
    --muted-foreground: 210 20% 35%;

    /* Accent Green - Eco-friendly */
    --accent: 142 71% 45%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 210 20% 90%;
    --input: 210 20% 90%;
    --ring: 211 100% 50%;

    --radius: 0.5rem;

    /* CTA Yellow/Orange */
    --cta: 45 100% 51%;
    --cta-foreground: 210 30% 15%;

    /* Trust indicators background */
    --trust-bg: 211 100% 97%;

    /* Hero overlay */
    --hero-overlay: 211 100% 20%;

    --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 {
    --background: 210 30% 8%;
    --foreground: 210 20% 95%;

    --card: 210 30% 12%;
    --card-foreground: 210 20% 95%;

    --popover: 210 30% 12%;
    --popover-foreground: 210 20% 95%;

    --primary: 211 100% 55%;
    --primary-foreground: 0 0% 100%;

    --secondary: 210 30% 18%;
    --secondary-foreground: 210 20% 95%;

    --muted: 210 30% 18%;
    --muted-foreground: 210 15% 65%;

    --accent: 142 71% 50%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 62% 30%;
    --destructive-foreground: 210 20% 98%;

    --border: 210 30% 20%;
    --input: 210 30% 20%;
    --ring: 211 100% 55%;

    --cta: 45 100% 55%;
    --cta-foreground: 210 30% 10%;

    --trust-bg: 211 50% 15%;
    --hero-overlay: 211 100% 10%;

    --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 {
  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
    font-size: 16px;
  }

  body {
    @apply bg-background text-foreground;
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    letter-spacing: var(--letter-spacing-body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Heading Typography */
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Manrope', system-ui, sans-serif;
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
    color: hsl(var(--foreground));
    text-wrap: balance;
  }

  h1 {
    font-size: var(--font-size-h1);
    font-weight: 800;
  }

  h2 {
    font-size: var(--font-size-h2);
    font-weight: 700;
  }

  h3 {
    font-size: var(--font-size-h3);
    font-weight: 600;
  }

  h4 {
    font-size: var(--font-size-h4);
    font-weight: 600;
  }

  h5 {
    font-size: var(--font-size-h5);
    font-weight: 600;
  }

  h6 {
    font-size: var(--font-size-base);
    font-weight: 600;
  }

  /* Paragraph & Body Text */
  p {
    max-width: var(--max-line-length);
  }

  /* Responsive Typography - Mobile */
  @media (max-width: 768px) {
    :root {
      --font-size-h1: 2.441rem; /* ~39px - reduced by ~20% */
      --font-size-h2: 1.953rem; /* ~31px */
      --font-size-h3: 1.563rem; /* ~25px */
      --font-size-h4: 1.25rem;  /* 20px */
      --font-size-h5: 1.125rem; /* 18px */
    }
  }

  /* Small Mobile */
  @media (max-width: 480px) {
    :root {
      --font-size-h1: 2rem;     /* 32px */
      --font-size-h2: 1.75rem;  /* 28px */
      --font-size-h3: 1.5rem;   /* 24px */
      --font-size-h4: 1.25rem;  /* 20px */
      --font-size-h5: 1.125rem; /* 18px */
    }
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  /* Typography Utilities */
  .heading-xl {
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: var(--font-size-h1);
    font-weight: 800;
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
  }
  
  .heading-lg {
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: var(--font-size-h2);
    font-weight: 700;
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
  }
  
  .heading-md {
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: var(--font-size-h3);
    font-weight: 600;
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
  }
  
  .body-lg {
    font-size: 1.125rem;
    line-height: var(--line-height-body);
  }
  
  .body-sm {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
  }
  
  .text-secondary {
    color: hsl(215 16% 47%);
  }
  
  .text-caption {
    font-size: var(--font-size-xs);
    color: hsl(215 14% 55%);
    letter-spacing: 0.01em;
  }
  
  .prose-readable {
    max-width: var(--max-line-length);
  }
  
  /* GPU-Accelerated Animation Utilities */
  .gpu-accelerated {
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
    backface-visibility: hidden;
  }
  
  .hover-scale-gpu {
    transition: transform 0.3s ease;
    will-change: transform;
  }
  
  .hover-scale-gpu:hover {
    transform: scale3d(1.05, 1.05, 1);
  }
  
  /* Optimized fade animation using GPU */
  .animate-fade-in-gpu {
    animation: fadeInGpu 0.3s ease-out backwards;
  }
  
  @keyframes fadeInGpu {
    from {
      opacity: 0;
      transform: translate3d(0, 10px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  
  /* Slide animations using GPU */
  .animate-slide-up-gpu {
    animation: slideUpGpu 0.4s ease-out backwards;
  }
  
  @keyframes slideUpGpu {
    from {
      opacity: 0;
      transform: translate3d(0, 20px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
}