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

@layer base {
  :root,
  [data-color-theme='forest'] {
    --brand-50: #eefaf3;
    --brand-100: #d6f1e0;
    --brand-200: #b0e3c6;
    --brand-300: #7dcda4;
    --brand-400: #47b07e;
    --brand-500: #22935f;
    --brand-600: #16774c;
    --brand-700: #125f3f;
    --brand-800: #114c34;
    --brand-900: #0e3e2c;
    --surface-bg: #f8fafc;
    --surface-bg-dark: #020617;
  }

  [data-color-theme='ocean'] {
    --brand-50: #eff6ff;
    --brand-100: #dbeafe;
    --brand-200: #bfdbfe;
    --brand-300: #93c5fd;
    --brand-400: #60a5fa;
    --brand-500: #3b82f6;
    --brand-600: #2563eb;
    --brand-700: #1d4ed8;
    --brand-800: #1e40af;
    --brand-900: #1e3a8a;
    --surface-bg: #f0f9ff;
    --surface-bg-dark: #0c1222;
  }

  [data-color-theme='sunset'] {
    --brand-50: #fffbeb;
    --brand-100: #fef3c7;
    --brand-200: #fde68a;
    --brand-300: #fcd34d;
    --brand-400: #fbbf24;
    --brand-500: #f59e0b;
    --brand-600: #d97706;
    --brand-700: #b45309;
    --brand-800: #92400e;
    --brand-900: #78350f;
    --surface-bg: #fffbeb;
    --surface-bg-dark: #1c1410;
  }

  [data-color-theme='berry'] {
    --brand-50: #f5f3ff;
    --brand-100: #ede9fe;
    --brand-200: #ddd6fe;
    --brand-300: #c4b5fd;
    --brand-400: #a78bfa;
    --brand-500: #8b5cf6;
    --brand-600: #7c3aed;
    --brand-700: #6d28d9;
    --brand-800: #5b21b6;
    --brand-900: #4c1d95;
    --surface-bg: #faf5ff;
    --surface-bg-dark: #140f1f;
  }

  html {
    @apply antialiased;
  }

  body {
    background-color: var(--surface-bg);
    @apply text-slate-900 dark:text-slate-100;
  }

  .dark body {
    background-color: var(--surface-bg-dark);
  }

  :focus-visible {
    @apply outline-none ring-2 ring-brand-500 ring-offset-2 ring-offset-white dark:ring-offset-slate-950;
  }
}

@layer components {
  .card {
    @apply rounded-2xl border border-slate-200 bg-white shadow-sm transition
      dark:border-slate-800 dark:bg-slate-900;
  }

  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold
      transition focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50;
  }

  .btn-primary {
    @apply btn bg-brand-600 text-white hover:bg-brand-700 active:bg-brand-800;
  }

  .btn-secondary {
    @apply btn border border-slate-300 bg-white text-slate-700 hover:bg-slate-100
      dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700;
  }

  .input {
    @apply w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-sm text-slate-900
      placeholder:text-slate-400 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-300
      dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:placeholder:text-slate-500 dark:focus:ring-brand-700;
  }

  .select {
    @apply input appearance-none bg-none pr-10;
    min-height: 2.75rem;
    height: 2.75rem;
  }

  .sr-only {
    @apply absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0;
    clip: rect(0, 0, 0, 0);
  }
}

#pdf-render-area {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 794px;
  background: #ffffff;
  color: #0f172a;
  z-index: -1;
  pointer-events: none;
}