/*
 * static/css/base.css
 * Shared component classes that centralize repeated Tailwind utility patterns.
 * Values are matched exactly to the Tailwind classes used on the main branch
 * so the visual appearance is identical.
 *
 * NOTE: We do NOT redefine color variables or invert them for dark mode here.
 * Dark mode is handled by Tailwind's .dark class and the existing utility
 * classes in templates. This file only provides named component shortcuts.
 */

/* ── Layout ── */
.app-container {
  max-width: 72rem;            /* matches Tailwind max-w-6xl (1152px) */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;          /* matches px-4 */
  padding-right: 1rem;
}

/* ── Card ── */
.card {
  background-color: #fff;                        /* bg-white */
  border-radius: 1rem;                           /* rounded-2xl (16px) */
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),
              0 1px 2px -1px rgb(0 0 0 / 0.1);  /* Tailwind shadow */
  border: 1px solid #e7e5e4;                     /* border-stone-200 */
  color: inherit;
  text-decoration: none;
  display: block;
  transition: all 150ms ease;
}
.dark .card {
  background-color: #292524;                     /* dark:bg-smoke-800 */
  border-color: #44403c;                         /* dark:border-stone-700 */
}

/* ── Tabs (recipes page) ── */
.tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.tab {
  padding: 0.5rem 1rem;          /* px-4 py-2 */
  border-radius: 9999px;         /* rounded-full */
  font-size: 0.875rem;           /* text-sm */
  font-weight: 500;              /* font-medium */
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
  border: none;
}
.tab--active {
  background-color: #fb923c;     /* bg-ember-400 */
  color: #fff;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);  /* shadow-sm */
}
.tab--active:hover {
  background-color: #ea580c;     /* hover:bg-ember-500 */
}
.tab--inactive {
  background-color: #f5f5f4;     /* bg-smoke-100 */
  color: #44403c;                /* text-smoke-700 */
  border: 1px solid #e7e5e4;    /* border border-stone-200 */
}
.tab--inactive:hover {
  background-color: #e7e5e4;     /* hover:bg-smoke-200 */
}
.dark .tab--inactive {
  background-color: #44403c;     /* dark:bg-smoke-700 */
  color: #e7e5e4;                /* dark:text-smoke-200 */
  border-color: #57534e;         /* dark:border-stone-600 */
}
.dark .tab--inactive:hover {
  background-color: #57534e;     /* dark:hover:bg-smoke-600 */
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;     /* py-2.5 px-6 */
  border-radius: 0.75rem;       /* rounded-xl (12px) */
  font-weight: 600;             /* font-semibold */
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
  text-decoration: none;
  font-size: inherit;
  line-height: 1.5;
}
.btn--primary {
  background-color: #ea580c;    /* bg-ember-500 */
  color: #fff;
  border: none;
}
.btn--primary:hover {
  background-color: #c2410c;    /* hover:bg-ember-600 */
}
.btn--primary:disabled {
  background-color: #d6d3d1;    /* disabled:bg-stone-300 */
  cursor: not-allowed;
}
.dark .btn--primary:disabled {
  background-color: #57534e;    /* dark:disabled:bg-stone-600 */
}
.btn--ghost {
  background: transparent;
  color: #44403c;               /* text-smoke-700 */
  border: 1px solid #d6d3d1;   /* border border-stone-300 */
}
.btn--ghost:hover {
  background-color: #f5f5f4;    /* hover:bg-stone-100 */
}
.dark .btn--ghost {
  color: #e7e5e4;               /* dark:text-smoke-200 */
  border-color: #57534e;        /* dark:border-stone-600 */
}
.dark .btn--ghost:hover {
  background-color: #44403c;    /* dark:hover:bg-smoke-700 */
}

/* Block / small button modifiers */
.btn--block { width: 100%; justify-content: center; }
.btn--sm {
  padding: 0.375rem 0.75rem;   /* smaller for inline actions */
  font-size: 0.875rem;         /* text-sm */
  border-radius: 0.75rem;
}

/* ── Form Controls ── */
.form-input,
.form-select {
  width: 100%;
  border: 1px solid #d6d3d1;                    /* border-stone-300 */
  border-radius: 0.5rem;                         /* rounded-lg */
  padding: 0.625rem 1rem;                        /* px-4 py-2.5 */
  font-size: 0.875rem;                           /* text-sm */
  background-color: #fff;
  color: inherit;
  box-sizing: border-box;
}
.form-input:focus,
.form-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fb923c;                /* focus:ring-2 focus:ring-ember-400 */
}
.dark .form-input,
.dark .form-select {
  background-color: #44403c;                     /* dark:bg-smoke-700 */
  border-color: #57534e;                         /* dark:border-stone-600 */
  color: #fafaf9;                                /* dark:text-smoke-50 */
}
.form-input::placeholder,
.form-select::placeholder {
  color: #a8a29e;                                /* placeholder-stone-400 */
}
.dark .form-input::placeholder,
.dark .form-select::placeholder {
  color: #a8a29e;                                /* dark:placeholder-stone-400 */
}

.form-textarea {
  width: 100%;
  border: 1px solid #d6d3d1;
  border-radius: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  background-color: #fff;
  color: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.form-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fb923c;
}
.dark .form-textarea {
  background-color: #44403c;
  border-color: #57534e;
  color: #fafaf9;
}
.form-textarea::placeholder {
  color: #a8a29e;
}
.dark .form-textarea::placeholder {
  color: #a8a29e;
}

/* ── Recipe / markdown prose ─────────────────────────────────────── */
/* @tailwindcss/typography is unavailable with the CDN build, so we  */
/* manually restore heading hierarchy for markdown-rendered content.  */
.prose h2 {
  font-size: 1.125rem;        /* ~text-lg */
  font-weight: 700;           /* bold */
  margin-top: 1.5rem;
  margin-bottom: 0.375rem;
  line-height: 1.4;
  color: #1c1917;             /* smoke-900 */
}
.dark .prose h2 {
  color: #fafaf9;             /* smoke-50 */
}
.prose h3 {
  font-size: 1rem;
  font-weight: 600;           /* semibold */
  margin-top: 1rem;
  margin-bottom: 0.25rem;
  line-height: 1.4;
}
.prose p {
  margin-bottom: 0.75rem;
}
.prose li {
  margin-bottom: 0.25rem;
}

/* ── Nav logo image ── */
.nav-logo-img {
  height: 2rem;       /* 32px — matches h-8 */
  width: 2rem;
  object-fit: contain;
  flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .app-container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}