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

/* Cores */
:root {
  --color-primary: #83b5d2;
  --color-secondary: #45ab53;
  --color-text: #05001d;
  --gradient-bottle-start: color-mix(in srgb, var(--color-primary) 30%, white);
  --gradient-bottle-mid: color-mix(in srgb, var(--color-primary) 46%, white);
  --gradient-bottle-end: color-mix(in srgb, var(--color-primary) 78%, black);
}

.tls-checkout-card {
  background-image: linear-gradient(
    to bottom,
    var(--gradient-bottle-start),
    var(--gradient-bottle-end)
  );
}

.tls-checkout-card--hero {
  background-image: linear-gradient(
    to bottom,
    var(--gradient-bottle-start),
    var(--gradient-bottle-mid),
    var(--gradient-bottle-end)
  );
}

.tls-best-value-badge {
  background-color: var(--gradient-bottle-end);
}

h1 {
  @apply text-3xl md:text-5xl font-bold text-[var(--color-text)] leading-tight;
}
h2 {
  @apply text-2xl md:text-4xl font-semibold text-[var(--color-text)] leading-snug;
}
h3 {
  @apply text-xl md:text-2xl font-semibold text-[var(--color-text)];
}
h4 {
  @apply text-lg md:text-xl font-medium text-[var(--color-text)];
}
p {
  @apply text-base md:text-lg text-[var(--color-text)] leading-relaxed;
}