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

:root {
  --text: #334155;
  --text-strong: #0f172a;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-muted: #f8fafc;
  --border: #e2e8f0;
  --accent: #dc2626;
  --accent-strong: #b91c1c;
  --accent-muted: #fef2f2;
  --shadow-soft: 0 10px 30px -24px rgba(15, 23, 42, 0.35);
}

body {
  margin: 0;
  font-family: "Segoe UI Variable", "Segoe UI", "SF Pro Text", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

#root {
  min-height: 100vh;
}

@layer components {
  .app-shell {
    @apply min-h-screen bg-[#f6f7f9] text-slate-700;
  }

  .app-topbar {
    @apply border-b border-slate-200 bg-white;
  }

  .app-subheader {
    @apply border-b border-slate-200 bg-white;
  }

  .app-nav-link {
    @apply flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-slate-600 transition-colors;
  }

  .app-nav-link:hover {
    @apply bg-slate-100 text-slate-950;
  }

  .app-nav-link-active {
    @apply bg-red-50 text-red-700 ring-1 ring-inset ring-red-100;
  }

  .app-panel,
  .app-panel-warm {
    @apply overflow-hidden rounded-lg border border-slate-200 bg-white;
    box-shadow: var(--shadow-soft);
  }

  .app-input {
    @apply rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-950 outline-none transition-colors;
  }

  .app-input:focus {
    @apply border-red-500 ring-2 ring-red-100;
  }

  .app-button-primary {
    @apply inline-flex items-center justify-center gap-2 rounded-md border border-red-600 bg-red-600 px-4 py-2 text-sm font-semibold text-white transition-colors;
  }

  .app-button-primary:hover {
    @apply border-red-700 bg-red-700;
  }

  .app-button-secondary {
    @apply inline-flex items-center justify-center gap-2 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 transition-colors;
  }

  .app-button-secondary:hover {
    @apply border-slate-400 bg-slate-50 text-slate-950;
  }

  .cm-surface {
    @apply rounded-lg border border-slate-200 bg-white;
    box-shadow: var(--shadow-soft);
  }

  .cm-icon-button {
    @apply inline-flex h-9 w-9 items-center justify-center rounded-md border border-slate-300 bg-white text-slate-600 transition-colors;
  }

  .cm-icon-button:hover {
    @apply border-slate-400 bg-slate-50 text-slate-950;
  }
}
