@import "tailwindcss";

@layer base {
  :root {
    --theme-bg-base: #f0f4f2;
    --theme-bg-surface: #ffffff;
    --theme-bg-surface-alt: #f4f7f5;
    --theme-bg-callout: #e8f4f0;
    --theme-primary: #2a7d7d;
    --theme-primary-hover: #1f6363;
    --theme-primary-light: #3a9e9e;
    --theme-text-heading: #1a2f2f;
    --theme-text-body: #2d4a4a;
    --theme-text-secondary: #4a6a6a;
    --theme-text-muted: #7a9a9a;
    --theme-border: #c8d8d0;
    --theme-border-light: #dce8e2;
    --theme-success: #2d8a4e;
    --theme-success-bg: #e8f5ed;
    --theme-error: #c44c4c;
    --theme-error-bg: #fce8e8;
    --theme-badge-bg: #e0eeea;
    --theme-badge-text: #2a6a5a;
    --theme-danger: #dc3545;
    --theme-danger-hover: #c82333;

    --theme-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --theme-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    --theme-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.1);
  }

  :root.dark {
    --theme-bg-base: #0f1614;
    --theme-bg-surface: #17221f;
    --theme-bg-surface-alt: #1e2d28;
    --theme-bg-callout: #1a332a;
    --theme-primary: #4ab2b2;
    --theme-primary-hover: #5ec7c7;
    --theme-primary-light: #6cd1d1;
    --theme-text-heading: #e4f0ec;
    --theme-text-body: #c3d9d3;
    --theme-text-secondary: #9cb8b0;
    --theme-text-muted: #6b8a81;
    --theme-border: #38524a;
    --theme-border-light: #253832;
    --theme-success: #4ade80;
    --theme-success-bg: #143621;
    --theme-error: #f87171;
    --theme-error-bg: #3b1c1c;
    --theme-badge-bg: #214035;
    --theme-badge-text: #6fd6b8;
    --theme-danger: #ef4444;
    --theme-danger-hover: #f87171;

    --theme-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
    --theme-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
    --theme-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3);
  }
}

@theme inline {
  /* ── Sage / Teal palette mapped from CSS variables ── */
  --color-bg-base: var(--theme-bg-base);
  --color-bg-surface: var(--theme-bg-surface);
  --color-bg-surface-alt: var(--theme-bg-surface-alt);
  --color-bg-callout: var(--theme-bg-callout);
  --color-primary: var(--theme-primary);
  --color-primary-hover: var(--theme-primary-hover);
  --color-primary-light: var(--theme-primary-light);
  --color-text-heading: var(--theme-text-heading);
  --color-text-body: var(--theme-text-body);
  --color-text-secondary: var(--theme-text-secondary);
  --color-text-muted: var(--theme-text-muted);
  --color-border: var(--theme-border);
  --color-border-light: var(--theme-border-light);
  --color-success: var(--theme-success);
  --color-success-bg: var(--theme-success-bg);
  --color-error: var(--theme-error);
  --color-error-bg: var(--theme-error-bg);
  --color-badge-bg: var(--theme-badge-bg);
  --color-badge-text: var(--theme-badge-text);
  --color-danger: var(--theme-danger);
  --color-danger-hover: var(--theme-danger-hover);

  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Shadows */
  --shadow-card: var(--theme-shadow-card);
  --shadow-card-hover: var(--theme-shadow-card-hover);
  --shadow-modal: var(--theme-shadow-modal);

  /* Animations */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Base Styles ── */
body {
  background: var(--color-bg-base);
  color: var(--color-text-body);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbar Styling ── */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ── Card flip animation ── */
.perspective-1000 {
  perspective: 1000px;
}

.preserve-3d {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
}

.rotate-y-180 {
  transform: rotateY(180deg);
}

.rotate-x-180 {
  transform: rotateX(180deg);
}

/* ── Swipe animations ── */
@keyframes swipeLeft {
  0% { transform: translateX(0) rotate(0deg); opacity: 1; }
  100% { transform: translateX(-40px) rotate(-8deg); opacity: 0; }
}

@keyframes swipeRight {
  0% { transform: translateX(0) rotate(0deg); opacity: 1; }
  100% { transform: translateX(40px) rotate(8deg); opacity: 0; }
}

.animate-swipe-left {
  animation: swipeLeft 0.4s var(--ease-spring) forwards;
}

.animate-swipe-right {
  animation: swipeRight 0.4s var(--ease-spring) forwards;
}

/* ── Modal animation ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

.animate-fade-in {
  animation: fadeIn 0.2s ease-out;
}

.animate-slide-up {
  animation: slideUp 0.3s var(--ease-spring);
}

/* ── Subtle pulse for loading states ── */
@keyframes subtlePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.animate-subtle-pulse {
  animation: subtlePulse 2s ease-in-out infinite;
}

/* ── Markdown content styles ── */
.markdown-content h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--color-text-heading); }
.markdown-content h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--color-text-heading); }
.markdown-content h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--color-text-heading); }
.markdown-content p { margin-bottom: 0.75rem; line-height: 1.7; }
.markdown-content ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 0.75rem; }
.markdown-content ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 0.75rem; }
.markdown-content li { margin-bottom: 0.25rem; line-height: 1.6; }
.markdown-content strong { font-weight: 600; color: var(--color-text-heading); }
.markdown-content code { background: var(--color-bg-surface-alt); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875rem; }
.markdown-content table { border-collapse: collapse; width: 100%; margin-bottom: 0.75rem; }
.markdown-content th { background: var(--color-bg-surface-alt); font-weight: 600; text-align: left; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border-light); }
.markdown-content td { padding: 0.5rem 0.75rem; border: 1px solid var(--color-border-light); }
.markdown-content *:last-child { margin-bottom: 0; }