/*
  Style tokens source (single-direction sync):
  - Extracted from Stitch MCP AI-generated Design Preview (B2B SaaS Theme)
*/

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
@import "./styles/mobile-touch.css";

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

@layer base {
  body {
    @apply bg-zinc-50 font-sans text-zinc-900 antialiased selection:bg-zinc-900 selection:text-white;
  }

  #root {
    @apply min-h-screen flex flex-col;
  }
}

@layer components {

  /* Layout */
  .layout-container {
    @apply mx-auto w-full px-4 sm:px-6 lg:px-8;
  }

  /* Buttons */
  .btn-primary {
    @apply flex items-center justify-center gap-2 px-4 py-2 bg-zinc-900 text-white rounded-lg text-sm font-bold hover:bg-zinc-800 transition-all shadow-sm;
  }

  .btn-secondary {
    @apply flex items-center justify-center gap-2 px-3 py-2 bg-white border border-zinc-200 rounded-lg text-sm font-medium text-zinc-700 hover:bg-zinc-50 transition-colors shadow-sm;
  }

  .btn-ghost {
    @apply text-zinc-400 hover:text-zinc-600 p-1 rounded-md transition-colors;
  }

  /* Cards */
  .card-std {
    @apply bg-white rounded-xl shadow-sm ring-1 ring-zinc-900/5 transition-all;
  }

  .card-title {
    @apply text-sm font-medium text-zinc-500 mb-1;
  }

  .card-value {
    @apply text-3xl font-bold text-zinc-900 tracking-tight;
  }

  /* Forms */
  .input-std {
    @apply h-10 w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 shadow-sm outline-none transition-colors focus:border-zinc-400 focus:ring-1 focus:ring-zinc-400;
  }

  .select-std {
    @apply h-10 w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-700 shadow-sm outline-none transition-colors focus:border-zinc-400 focus:ring-1 focus:ring-zinc-400;
  }

  .select-sm {
    @apply h-8 rounded-md border border-zinc-200 bg-white px-2 py-1 text-xs font-medium text-zinc-600 shadow-sm outline-none transition-colors focus:border-zinc-400 focus:ring-1 focus:ring-zinc-400;
  }

  /* Tables */
  .table-container {
    @apply bg-white rounded-xl shadow-sm ring-1 ring-zinc-900/5 overflow-hidden;
  }

  .table-header {
    @apply bg-zinc-50/50 border-b border-zinc-100;
  }

  .table-th {
    @apply px-6 py-4 text-xs font-bold text-zinc-500 text-left;
  }

  .table-row {
    @apply transition-colors hover:bg-zinc-50/80;
  }

  .table-td {
    @apply px-6 py-4 text-sm text-zinc-600;
  }

  .table-td-strong {
    @apply px-6 py-4 text-sm font-bold text-zinc-900;
  }

  /* Badges */
  .badge-success {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-600/10;
  }

  .badge-warning {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-600/10;
  }

  .badge-error {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/10;
  }

  .badge-neutral {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-zinc-100 text-zinc-700 ring-1 ring-inset ring-zinc-600/10;
  }
}