@import "tailwindcss";

/* ── BeanFlows Brand Theme ── */
@theme {
  --font-display: "Fraunces", "DM Sans", ui-serif, Georgia, serif;
  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", monospace;

  --color-espresso: #2C1810;
  --color-roast: #4A2C1A;
  --color-copper: #B45309;
  --color-copper-hover: #92400E;
  --color-bean-green: #15803D;
  --color-forest: #064E3B;
  --color-cream: #FFFBF5;
  --color-latte: #F5F0EB;
  --color-parchment: #E8DFD5;
  --color-stone: #78716C;
  --color-stone-dark: #57534E;
  --color-danger: #EF4444;
  --color-danger-hover: #DC2626;
  --color-warning: #D97706;
}

/* ── Base layer ── */
@layer base {
  body {
    @apply bg-cream text-stone-dark font-sans antialiased;
  }
  h1, h2, h3 {
    font-family: var(--font-display);
    @apply text-espresso font-bold tracking-tight;
  }
  h4, h5, h6 {
    @apply text-roast font-semibold;
  }
  a {
    @apply text-copper hover:text-copper-hover transition-colors;
  }
  hr {
    @apply border-parchment my-6;
  }
}

/* ── Component classes ── */
@layer components {
  /* ── Navigation ── */
  .nav-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 251, 245, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(232, 223, 213, 0.7);
  }
  .nav-inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
  }
  .nav-logo {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--color-espresso);
    text-decoration: none;
  }
  .nav-logo:hover {
    color: var(--color-espresso);
  }
  .nav-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
  }
  .nav-links a {
    color: var(--color-stone-dark);
    text-decoration: none;
    transition: color 0.15s;
  }
  .nav-links a:hover {
    color: var(--color-copper);
  }
  a.nav-auth-btn,
  button.nav-auth-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border: none;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    background: var(--color-copper);
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(180, 83, 9, 0.25);
    transition: background 0.15s;
  }
  a.nav-auth-btn:hover,
  button.nav-auth-btn:hover {
    background: var(--color-copper-hover);
    color: #fff;
  }
  .nav-badge {
    @apply bg-copper/10 text-copper px-2 py-0.5 text-xs font-semibold rounded-full;
  }
  .nav-form {
    margin: 0;
    padding: 0;
    display: inline;
  }
  .nav-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--color-espresso);
  }
  @media (max-width: 768px) {
    .nav-hamburger { display: block; }
    .nav-links {
      display: none;
      position: absolute;
      top: 56px;
      left: 0;
      right: 0;
      flex-direction: column;
      background: rgba(255, 251, 245, 0.97);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(232, 223, 213, 0.7);
      padding: 1rem;
      gap: 0.75rem;
      align-items: stretch;
      text-align: center;
    }
    .nav-links.open { display: flex; }
    .nav-inner { position: relative; }
  }

  /* Page container */
  .container-page {
    @apply max-w-6xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* ── Display headings (Fraunces serif) ── */
  .heading-display {
    font-family: var(--font-display);
    @apply text-espresso font-bold tracking-tight;
  }

  /* ── Section heading (centered title + subtitle) ── */
  .section-heading {
    @apply text-center mb-12;
  }
  .section-heading h2 {
    @apply text-3xl md:text-4xl mb-3;
  }
  .section-heading p {
    @apply text-stone text-lg max-w-2xl mx-auto;
  }

  /* ── Hero section ── */
  .hero {
    @apply text-center py-20 md:py-28;
  }
  .hero h1 {
    font-family: var(--font-display);
    @apply text-4xl md:text-5xl lg:text-6xl mb-6 max-w-4xl mx-auto leading-tight;
  }
  .hero p {
    @apply text-lg md:text-xl text-stone max-w-2xl mx-auto mb-8;
  }

  /* ── Feature card (icon + heading + text) ── */
  .feature-card {
    @apply bg-white border border-parchment rounded-2xl p-6 shadow-sm
           hover:shadow-md transition-shadow;
  }
  .feature-card .feature-icon {
    @apply text-3xl mb-3;
  }
  .feature-card h3 {
    @apply text-lg mb-2;
  }
  .feature-card p {
    @apply text-sm text-stone leading-relaxed;
  }

  /* ── Metric card (dashboard KPIs) ── */
  .metric-card {
    @apply bg-white border border-parchment rounded-2xl p-5 shadow-sm;
  }
  .metric-label {
    @apply text-xs font-semibold text-stone uppercase tracking-wider;
  }
  .metric-value {
    @apply text-2xl md:text-3xl font-bold text-espresso font-mono mt-1;
  }
  .metric-sub {
    @apply text-xs text-stone mt-1;
  }

  /* ── Auth card (narrow centered) ── */
  .auth-card {
    @apply bg-white border border-parchment rounded-2xl p-8 shadow-sm
           max-w-md mx-auto my-16;
  }
  .auth-card h1 {
    @apply text-2xl mb-2;
  }
  .auth-card p.subtitle {
    @apply text-stone text-sm mb-6;
  }

  /* ── Pricing cards ── */
  .pricing-card {
    @apply bg-white border border-parchment rounded-2xl p-6 shadow-sm
           flex flex-col;
  }
  .pricing-card-highlighted {
    @apply bg-white border-2 border-copper rounded-2xl p-6 shadow-md
           flex flex-col relative;
  }
  .pricing-badge {
    @apply absolute -top-3 left-1/2 -translate-x-1/2
           bg-copper text-white text-xs font-semibold px-3 py-1 rounded-full;
  }

  /* ── Step number (how-it-works) ── */
  .step-number {
    @apply w-10 h-10 rounded-full bg-copper text-white
           flex items-center justify-center text-sm font-bold mx-auto mb-3;
  }

  /* ── FAQ accordion ── */
  .faq-item {
    @apply border-b border-parchment;
  }
  .faq-item summary {
    @apply py-4 cursor-pointer font-medium text-espresso
           list-none flex justify-between items-center;
  }
  .faq-item summary::after {
    content: "+";
    @apply text-copper text-xl font-light transition-transform;
  }
  .faq-item[open] summary::after {
    content: "\2212";
  }
  .faq-item p {
    @apply pb-4 text-sm text-stone leading-relaxed;
  }

  /* ── Chart container ── */
  .chart-container {
    @apply bg-white border border-parchment rounded-2xl p-4 md:p-6 shadow-sm;
  }
  .chart-container canvas {
    width: 100% !important;
    max-height: 400px;
  }

  /* ── Plan gate (upgrade prompt) ── */
  .plan-gate {
    @apply bg-latte border border-parchment rounded-xl p-4 text-sm text-stone text-center;
  }
  .plan-gate a {
    @apply font-semibold;
  }

  /* ── Danger card ── */
  .danger-card {
    @apply bg-white border-2 border-danger/30 rounded-2xl p-6 shadow-sm;
  }

  /* ── Page header (dashboard) ── */
  .page-header {
    @apply mb-8;
  }
  .page-header h1 {
    @apply text-3xl mb-1;
  }
  .page-header p {
    @apply text-stone text-lg;
  }

  /* Cards */
  .card {
    @apply bg-white border border-parchment rounded-2xl p-6 mb-6 shadow-sm;
  }
  .card-header {
    @apply border-b border-parchment pb-3 mb-4 text-sm text-stone font-medium;
  }

  /* Buttons — shared base */
  .btn, .btn-secondary, .btn-danger {
    @apply inline-flex items-center justify-center px-5 py-2.5 rounded-xl
           font-semibold text-sm transition-colors cursor-pointer
           focus:outline-none focus:ring-2 focus:ring-copper/50;
  }
  .btn {
    @apply bg-copper text-white hover:bg-copper-hover shadow-[0_2px_10px_rgba(180,83,9,0.25)];
  }
  .btn-secondary {
    @apply bg-stone-dark text-white hover:bg-espresso;
  }
  .btn-danger {
    @apply bg-danger text-white hover:bg-danger-hover;
  }
  .btn-outline {
    @apply inline-flex items-center justify-center px-5 py-2.5 rounded-xl
           font-semibold text-sm transition-colors cursor-pointer
           bg-transparent text-stone-dark border border-parchment
           hover:bg-latte hover:text-espresso
           focus:outline-none focus:ring-2 focus:ring-copper/50;
  }
  .btn-sm {
    @apply px-3 py-1.5 text-xs;
  }

  /* Forms */
  .form-label {
    @apply block text-sm font-medium text-roast mb-1;
  }
  .form-input {
    @apply w-full px-3 py-2 rounded-xl border border-parchment bg-white
           text-stone-dark placeholder-stone
           focus:outline-none focus:ring-2 focus:ring-copper/50 focus:border-copper
           transition-colors;
  }
  .form-hint {
    @apply text-xs text-stone mt-1;
  }

  /* Tables */
  .table {
    @apply w-full text-sm;
  }
  .table th {
    @apply text-left px-3 py-2 text-xs font-semibold text-stone uppercase tracking-wider
           border-b-2 border-parchment;
  }
  .table td {
    @apply px-3 py-2 border-b border-parchment text-stone-dark;
  }
  .table tbody tr:hover {
    @apply bg-latte;
  }

  /* Flash messages */
  .flash, .flash-error, .flash-success, .flash-warning {
    @apply px-4 py-3 rounded-xl mb-4 border-l-4 bg-white text-stone-dark text-sm;
  }
  .flash {
    @apply border-copper;
  }
  .flash-error {
    @apply border-danger;
  }
  .flash-success {
    @apply border-bean-green;
  }
  .flash-warning {
    @apply border-warning;
  }

  /* Badges */
  .badge, .badge-success, .badge-danger, .badge-warning {
    @apply inline-block px-2 py-0.5 text-xs font-semibold rounded-full;
  }
  .badge {
    @apply bg-copper/10 text-copper;
  }
  .badge-success {
    @apply bg-bean-green/10 text-bean-green;
  }
  .badge-danger {
    @apply bg-danger/10 text-danger;
  }
  .badge-warning {
    @apply bg-warning/10 text-warning;
  }

  /* Heading group */
  .heading-group {
    @apply mb-6;
  }
  .heading-group h1,
  .heading-group h2 {
    @apply mb-1;
  }
  .heading-group p {
    @apply text-stone text-lg;
  }

  /* Grid helpers */
  .grid-auto {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
  }
  .grid-2 {
    @apply grid grid-cols-1 md:grid-cols-2 gap-6;
  }
  .grid-3 {
    @apply grid grid-cols-1 md:grid-cols-3 gap-6;
  }
  .grid-4 {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6;
  }

  /* Monospace data display */
  .metric {
    @apply font-mono text-espresso;
  }
  .mono {
    @apply font-mono;
  }

  /* HTMX loading indicators */
  .htmx-indicator {
    display: none;
  }
  .htmx-request .htmx-indicator,
  .htmx-request.htmx-indicator {
    display: inline;
  }

  /* Code blocks */
  code {
    @apply font-mono text-sm bg-latte px-1 py-0.5 rounded;
  }
}
