@import "tailwindcss";

@theme {
  /* Brand: gold (primary) */
  --color-gold-50: #fef7ee;
  --color-gold-100: #fceedc;
  --color-gold-200: #f9ddba;
  --color-gold-300: #f6cd97;
  --color-gold-400: #f3bc75;
  --color-gold-500: #f0ab52; /* brand primary */
  --color-gold-600: #c68e46;
  --color-gold-700: #9d7039;
  --color-gold-800: #73532d;
  --color-gold-900: #493620;
  --color-gold-950: #34271a;

  /* Brand: bronze (secondary / accent) */
  --color-bronze-50: #f8f1ea;
  --color-bronze-100: #f0e3d5;
  --color-bronze-200: #e1c7ab;
  --color-bronze-300: #d2ac80;
  --color-bronze-400: #c39056;
  --color-bronze-500: #b4742c; /* brand accent */
  --color-bronze-600: #925e24;
  --color-bronze-700: #70481b;
  --color-bronze-800: #4e3213;
  --color-bronze-900: #2c1c0b;
  --color-bronze-950: #1b1107;

  /* Brand: charcoal (neutral / dark) */
  --color-charcoal-50: #ecebea;
  --color-charcoal-100: #d8d7d6;
  --color-charcoal-200: #b1afad;
  --color-charcoal-300: #8a8684;
  --color-charcoal-400: #635e5b;
  --color-charcoal-500: #3c3632;
  --color-charcoal-600: #332e2a;
  --color-charcoal-700: #2a2523;
  --color-charcoal-800: #211d1b;
  --color-charcoal-900: #181414;
  --color-charcoal-950: #131010; /* brand near-black */

  --font-sans: var(--font-montserrat), ui-sans-serif, system-ui, sans-serif;
  --font-arabic: var(--font-shamel), ui-sans-serif, system-ui, sans-serif;

  --animate-fade-up: fade-up 0.7s ease-out both;
  --animate-fade-in: fade-in 0.9s ease-out both;

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

:root {
  --background: #ffffff;
  --foreground: var(--color-charcoal-950);
  color-scheme: light;
}

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

body[dir="rtl"] {
  font-family: var(--font-arabic);
}

::selection {
  background: var(--color-gold-300);
  color: var(--color-charcoal-950);
}