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

/* Theme CSS custom properties are engine-generated via studio_theme_css_tag */

@layer components {
  .card {
    @apply bg-surface rounded-xl border border-subtle;
  }
  .card-hover {
    @apply bg-surface rounded-xl border border-subtle hover:border-primary-700/50 hover:shadow-lg hover:shadow-primary-900/10 transition;
  }
  .badge {
    @apply inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border;
  }
  .input-field {
    @apply w-full bg-surface-alt border border-strong rounded-lg px-4 py-3 text-heading focus:border-primary focus:outline-none;
  }
  .empty-state {
    @apply bg-surface rounded-xl border border-subtle p-8 text-center;
  }
  .json-debug {
    @apply bg-inset rounded-xl border border-subtle p-4 overflow-x-auto;
  }
  .label-upper {
    @apply text-xs text-muted uppercase tracking-wider;
  }

  /* -- Button System (standardized across all Studio apps) -- */
  .btn {
    @apply inline-flex items-center justify-center font-bold rounded-lg transition px-6 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-primary {
    @apply text-white;
    background-color: var(--color-cta);
  }
  .btn-primary:hover {
    background-color: var(--color-cta-hover);
  }
  .btn-secondary {
    @apply text-white;
    background-color: var(--color-success);
  }
  .btn-secondary:hover {
    filter: brightness(0.9);
  }
  .btn-outline {
    @apply bg-transparent border text-heading;
    border-color: var(--color-cta);
  }
  .btn-outline:hover {
    @apply text-white;
    background-color: var(--color-cta);
  }
  .btn-danger {
    @apply text-white;
    background-color: var(--color-danger);
  }
  .btn-danger:hover {
    filter: brightness(0.9);
  }
  .btn-warning {
    @apply text-white;
    background-color: var(--color-warning);
  }
  .btn-warning:hover {
    filter: brightness(0.9);
  }
  .btn-success {
    @apply text-white;
    background-color: var(--color-success);
  }
  .btn-success:hover {
    filter: brightness(0.9);
  }
  .btn-google {
    @apply bg-white border border-strong shadow-sm;
    color: #374151;
  }
  .btn-google:hover {
    @apply bg-gray-50;
  }
  .btn-sm {
    @apply px-3 py-1.5 text-xs;
  }
  .btn-lg {
    @apply px-8 py-3 text-base rounded-xl shadow;
  }

  /* Prose styling for expense guide markdown */
  .prose-themed h1 { font-size: 1.75rem; font-weight: 800; color: var(--color-text); margin-bottom: 0.75rem; }
  .prose-themed h2 { font-size: 1.35rem; font-weight: 700; color: var(--color-text); margin-top: 1.5rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.4rem; }
  .prose-themed h3 { font-size: 1.1rem; font-weight: 600; color: var(--color-text-body); margin-top: 1.25rem; margin-bottom: 0.4rem; }
  .prose-themed p { color: var(--color-text-body); line-height: 1.7; margin-bottom: 0.75rem; }
  .prose-themed ul, .prose-themed ol { color: var(--color-text-body); margin-left: 1.25rem; margin-bottom: 0.75rem; }
  .prose-themed ul { list-style-type: disc; }
  .prose-themed ol { list-style-type: decimal; }
  .prose-themed li { margin-bottom: 0.25rem; line-height: 1.6; }
  .prose-themed a { color: var(--color-cta); text-decoration: underline; }
  .prose-themed a:hover { color: var(--color-primary-300, var(--color-cta)); filter: brightness(1.3); }
  .prose-themed strong { color: var(--color-text); }
  .prose-themed code { background: var(--color-surface-alt); color: var(--color-primary-300, var(--color-cta)); padding: 0.15rem 0.4rem; border-radius: 0.25rem; font-size: 0.85em; }
  .prose-themed pre { background: var(--color-inset); border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 1rem; overflow-x: auto; margin-bottom: 1rem; }
  .prose-themed pre code { background: none; padding: 0; color: var(--color-text-body); font-size: 0.85em; }
  .prose-themed table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
  .prose-themed th { text-align: left; color: var(--color-text); font-weight: 600; padding: 0.5rem; border-bottom: 2px solid var(--color-border); }
  .prose-themed td { padding: 0.5rem; border-bottom: 1px solid var(--color-border); color: var(--color-text-body); }
  .prose-themed blockquote { border-left: 3px solid var(--color-cta); padding-left: 1rem; color: var(--color-text-secondary); margin-bottom: 0.75rem; }
  .prose-themed hr { border-color: var(--color-border); margin: 1.5rem 0; }

  /* Theme transition (applied during toggle) */
  .theme-transition *,
  .theme-transition *::before,
  .theme-transition *::after {
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */