@import "tailwindcss";

@theme {
  /* Direção D — Marca */
  --color-brand:        #0E0F12;
  --color-brand-hover:  #1F2024;
  --color-accent:       #B7895A;
  --color-accent-hover: #9E7248;
  --color-surface:      #FAF7F2;
  --color-navy:         #0B2545;
  --color-border:       #EAE4D9;

  --font-sans:  var(--font-manrope),     'Manrope',           system-ui, sans-serif;
  --font-serif: var(--font-instrument),  'Instrument Serif',  Georgia,   serif;
}

body {
  font-family: var(--font-sans);
  background-color: #FAF7F2;
  color: #0E0F12;
}

@layer components {
  .input {
    @apply w-full rounded-lg border border-[#EAE4D9] bg-white px-3 py-2 text-sm
           text-[#0E0F12] placeholder-[#B7895A]/40 outline-none transition
           focus:border-[#B7895A] focus:ring-2 focus:ring-[#B7895A]/15;
  }

  .btn-primary {
    @apply rounded-lg bg-[#0E0F12] px-4 py-2 text-sm font-medium text-[#FAF7F2]
           transition hover:bg-[#1F2024] active:bg-[#0B2545]
           disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-secondary {
    @apply rounded-lg border border-[#EAE4D9] bg-white px-4 py-2 text-sm font-medium
           text-[#0E0F12] transition hover:bg-[#FAF7F2] hover:border-[#B7895A]/50;
  }
}