@theme {
  --color-libro-primary: #345134; /* Deeper Forest Green */
  --color-libro-primary-dark: #263b26;
  --color-libro-bg: #ffffff;
  --color-libro-surface: #f3f5f2; /* Noticed tint */
  --color-libro-surface-alt: #edf0ec; /* Deeper tint for contrast */
  --color-libro-border: #e2e8e3;
  --color-libro-text-main: #111827;
  --color-libro-text-muted: #6b7280;
  --color-libro-accent: #f59e0b; /* Rating Gold */
  
  --font-display: 'Playfair Display', serif;
  --font-sans: 'Inter', sans-serif;

  --shadow-soft: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
  --shadow-strong: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
}

@layer components {
  .libro-card {
    background: white;
    border: 1px solid var(--color-libro-border);
    border-radius: 1rem;
    box-shadow: var(--shadow-soft);
    transition: all 0.3s ease;
  }

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

  .libro-button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 2rem;
    background: var(--color-libro-primary) !important;
    color: white !important;
    font-weight: 600;
    border-radius: 9999px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
  }

  .libro-button-primary:hover {
    background: var(--color-libro-primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 110, 78, 0.2);
  }

  .social-icon {
    @apply w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 transition-all;
  }

  .social-icon:hover {
    @apply bg-libro-primary text-white;
  }
}

body {
  background-color: #fcfdfc !important;
  color: #111827 !important;
  font-family: var(--font-sans);
}

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

/* Utilities for compatibility */
@utility obsidian-card {
  @apply libro-card;
}

@utility auth-input {
  background: white;
  border: 1px solid var(--color-libro-border);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  color: var(--color-libro-text-main);
  transition: all 0.3s ease;
}

@utility auth-input:focus {
  border-color: var(--color-libro-primary);
  ring: 2px solid rgba(59, 110, 78, 0.1);
  outline: none;
}

@utility btn-base-primary {
  @apply libro-button-primary;
}

/* Custom Gradients */
.bg-libro-gradient {
    background: linear-gradient(135deg, #f5f7f2 0%, #e8ede9 100%);
}

/* =========================================
   MOBILE RESPONSIVE — Global Libro Theme
   ========================================= */

/* --- Navbar Mobile --- */
@media (max-width: 1023px) {
    .libro-nav-inner {
        height: 68px !important;
        padding: 0 1rem !important;
    }
    .libro-logo-name { font-size: 1.2rem !important; }
    .libro-logo-sub { display: none; }
    /* Hide Sign In button from navbar on mobile — it lives in the mobile menu */
    .libro-login-btn {
        display: none !important;
    }
}

/* --- Hero Section Mobile --- */
@media (max-width: 768px) {
    /* Hero */
    section[style*="background: #f5ede0"] h1 {
        font-size: 2rem !important;
    }
    section[style*="background: #f5ede0"] .container {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    section[style*="background: #f5ede0"] .lg\:w-1\/2 {
        width: 100% !important;
    }
    /* Hero image on mobile */
    .hero-image {
        display: none;
    }
    .hero-badges {
        flex-wrap: wrap;
        gap: 1rem !important;
    }
}

/* --- Storefront Index Header Mobile --- */
@media (max-width: 768px) {
    /* "Our Book Collection" header */
    section[style*="background: #f8f5f0; padding-top: 7rem"] h1 {
        font-size: 3rem !important;
    }
    section[style*="background: #f8f5f0; padding-top: 7rem"] {
        padding-top: 6rem !important;
        padding-bottom: 2rem !important;
    }
    section[style*="background: #f8f5f0; padding-top: 7rem"] .lg\:w-1\/3 {
        width: 100% !important;
    }
    section[style*="background: #f8f5f0; padding-top: 7rem"] p {
        text-align: left !important;
    }

    /* Filter bar */
    .sticky .container form {
        flex-direction: column !important;
    }
}

/* --- Product Cards Grid Mobile --- */
@media (max-width: 640px) {
    .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }
}

/* --- Product Page Mobile --- */
@media (max-width: 1023px) {
    /* Sticky sidebar becomes normal flow */
    .lg\:col-span-5 [style*="position: sticky"] {
        position: static !important;
    }
    /* Reduce top padding */
    .pt-32 {
        padding-top: 6rem !important;
    }
    /* Tab scroll on mobile */
    .prod-tab-btn {
        white-space: nowrap;
    }
}

/* --- Pricing Table Mobile --- */
@media (max-width: 768px) {
    .pricing-card.featured {
        transform: scale(1) !important;
        order: -1;
    }
    .pricing-card.featured:hover {
        transform: translateY(-4px) !important;
    }
    [style*="padding: 7rem 0"] {
        padding: 4rem 1rem !important;
    }
    [style*="font-size:3rem"] {
        font-size: 2.2rem !important;
    }
}

/* --- Auth Pages Mobile --- */
@media (max-width: 640px) {
    /* Login & Register card */
    .rounded-\[2\.5rem\] {
        border-radius: 1.5rem !important;
    }
    .p-10 { padding: 1.5rem !important; }
    .md\:p-14 { padding: 1.5rem !important; }
    /* Role cards in register */
    .role-card { padding: 1rem 0.75rem !important; }
    /* Grid becomes single column */
    .grid.grid-cols-1.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    /* Login input sizing */
    .login-input, .reg-input {
        font-size: 0.8rem !important;
    }
}

/* --- Footer Mobile --- */
@media (max-width: 768px) {
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    footer .flex.justify-between {
        flex-direction: column !important;
        gap: 1rem !important;
        text-align: center !important;
    }
}

/* --- General spacing fixes for small screens --- */
@media (max-width: 480px) {
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    h1[style*="font-size:4.5rem"],
    h1[style*="font-size: 4.5rem"] {
        font-size: 2.5rem !important;
    }
}