@import "tailwindcss";

@theme inline {
  /* Anouma color palette */
  --color-anouma-mauve-dark: #8b616d;
  --color-anouma-rose: #d19ca1;
  --color-anouma-rose-soft: #e0b4b1;
  --color-anouma-rose-pale: #e5c4bc;
  --color-anouma-peach-rose: #ecc8be;
  --color-anouma-powder: #efd5c8;
  --color-anouma-cream-warm: #efdbcd;
  --color-anouma-cream-beige: #f0e0d3;
  --color-anouma-cream-light: #f2e2d6;

  --color-anouma-sage: #89937c;
  --color-anouma-olive: #667052;
  --color-anouma-moss: #4f5b45;
  --color-anouma-walnut: #765a48;
  --color-anouma-caramel: #a47c60;
  --color-anouma-sand: #d4c1a5;
  --color-anouma-cream-beige-2: #e8dcc8;
  --color-anouma-taupe: #a89580;
  --color-anouma-dustyrose: #a97070;
  --color-anouma-mauve: #8b6f7d;
  --color-anouma-plum: #66505f;

  --color-background: #fbf6f1;
  --color-foreground: #453238;

  --font-serif: var(--font-cormorant), "Cormorant Garamond", ui-serif, Georgia, serif;
  --font-sans: var(--font-inter), "Inter", ui-sans-serif, system-ui, sans-serif;

  --animate-fade-up: fade-up 0.8s ease-out both;
  --animate-fade-in: fade-in 1s ease-out both;

  @keyframes fade-up {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

:root {
  --background: #fbf6f1;
  --foreground: #453238;
}

* {
  scrollbar-color: var(--color-anouma-rose) var(--color-anouma-cream-light);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
}

::selection {
  background: var(--color-anouma-rose-soft);
  color: var(--color-anouma-plum);
}

/* Visible, elegant focus state used across all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-anouma-mauve-dark);
  outline-offset: 3px;
  border-radius: 2px;
}

.text-balance {
  text-wrap: balance;
}