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

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 255, 248, 234; /* warm-white */
  --background-end-rgb: 225, 215, 198; /* sand */
  
  /* Custom colors */
  --sunset-orange: #FF7B54;
  --sunset-pink: #FFB26B;
  --sunset-yellow: #FFD56F;
  --sunset-purple: #939B62;
  --evening-blue: #1A5F7A;
  --night-blue: #002B5B;
  --warm-white: #FFF8EA;
  --sand: #E1D7C6;
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

@layer base {
  h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
  }
  
  p, span, a, button {
    font-weight: 400;
  }
}

@layer components {
  .btn-primary {
    background-color: var(--sunset-orange);
    color: var(--warm-white);
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    transition: background-color 0.3s ease;
  }
  
  .btn-primary:hover {
    background-color: var(--sunset-pink);
  }
  
  .btn-secondary {
    background-color: var(--evening-blue);
    color: var(--warm-white);
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    transition: background-color 0.3s ease;
  }
  
  .btn-secondary:hover {
    background-color: var(--night-blue);
  }
  
  .section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  
  @media (min-width: 768px) {
    .section {
      padding-top: 6rem;
      padding-bottom: 6rem;
    }
  }
  
  .container-custom {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  @media (min-width: 640px) {
    .container-custom {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }
  
  @media (min-width: 1024px) {
    .container-custom {
      padding-left: 2rem;
      padding-right: 2rem;
    }
  }
}