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

/* Lennart Svenssons Konditorivaror - Traditionell Svensk Konditoristil */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&display=swap');

@layer base {
  :root {
    --background: 38 25% 96%;
    --foreground: 25 30% 12%;

    --card: 40 30% 94%;
    --card-foreground: 25 30% 12%;

    --popover: 40 30% 94%;
    --popover-foreground: 25 30% 12%;

    --primary: 4 70% 45%;
    --primary-foreground: 40 30% 96%;

    --secondary: 35 20% 88%;
    --secondary-foreground: 25 30% 18%;

    --muted: 35 15% 85%;
    --muted-foreground: 0 0% 0%;

    --accent: 4 70% 45%;
    --accent-foreground: 40 30% 96%;

    --destructive: 4 70% 40%;
    --destructive-foreground: 40 30% 96%;

    --border: 30 20% 80%;
    --input: 30 20% 80%;
    --ring: 4 70% 45%;

    --radius: 0.25rem;

    /* Custom tokens */
    --gradient-warm: linear-gradient(180deg, hsl(40 30% 94%) 0%, hsl(35 25% 90%) 100%);
    --shadow-classic: 0 4px 20px -4px hsl(25 30% 12% / 0.15);
    --shadow-card: 0 2px 8px hsl(25 30% 12% / 0.08);

    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'Crimson Text', serif;
  }

  .dark {
    --background: 25 20% 8%;
    --foreground: 38 25% 92%;
    --card: 25 18% 12%;
    --card-foreground: 38 25% 92%;
    --primary: 30 50% 55%;
    --primary-foreground: 25 20% 8%;
    --secondary: 25 15% 18%;
    --secondary-foreground: 38 25% 92%;
    --muted: 25 12% 22%;
    --muted-foreground: 30 15% 60%;
    --border: 25 15% 25%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  html::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-family: var(--font-body);
  }

  /* Ensure full-width layout (avoid template max-width/padding on #root) */
  #root {
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: inherit;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
  }
}

@layer components {
  .hero-gradient {
    background: var(--gradient-warm);
  }

  .text-accent-warm {
    color: hsl(var(--accent));
  }

  .card-classic {
    box-shadow: var(--shadow-card);
    border: 1px solid hsl(var(--border));
    transition: all 0.3s ease;
  }

  .card-classic:hover {
    box-shadow: var(--shadow-classic);
    transform: translateY(-4px);
  }

  .btn-classic {
    @apply bg-primary text-primary-foreground font-semibold transition-all duration-300;
    border: 2px solid hsl(var(--primary));
  }

  .btn-classic:hover {
    @apply bg-transparent;
    color: hsl(var(--primary));
  }

  .btn-outline-classic {
    @apply bg-transparent font-semibold transition-all duration-300;
    color: hsl(var(--primary));
    border: 2px solid hsl(var(--primary));
  }

  .btn-outline-classic:hover {
    @apply bg-primary text-primary-foreground;
  }

  .divider-ornament {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .divider-ornament::before,
  .divider-ornament::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, hsl(var(--border)), transparent);
  }

  .ornament {
    color: hsl(var(--primary));
    font-family: var(--font-display);
    font-size: 1.5rem;
  }
}

@layer utilities {
  .animate-fade-up {
    animation: fadeUp 0.8s ease-out forwards;
  }

  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .text-balance {
    text-wrap: balance;
  }
}