@import "tailwindcss";
@import '../../public/assets/colors/brand-colors.css';
@import '../../public/assets/fonts/fonts.css';


/* ─── Tailwind v4 Theme Tokens ───────────────────────── */
@theme {
  /* Brand colors → generate bg-primary, text-primary, border-primary … */
  --color-primary:          #6CAEBD;
  --color-primary-dark:     #4A8FA0;
  --color-primary-light:    #E8F6F8;
  --color-primary-hover:    #5A9DAB;
  --color-primary-subtle:   #C8E6EC;

  --color-secondary:        #875E9E;
  --color-secondary-dark:   #6A4A7E;
  --color-secondary-light:  #F3EEF7;
  --color-secondary-hover:  #7A5490;
  --color-secondary-subtle: #D8C8E8;

  --color-accent:           #8FA4AB;
  --color-accent-dark:      #6B838C;
  --color-accent-light:     #EEF2F3;
  --color-accent-hover:     #7D949C;
  --color-accent-subtle:    #C8D4D8;

  --color-slate-50:         #F4F7F8;
  --color-slate-100:        #E8EDEF;
  --color-slate-200:        #C8D4D8;
  --color-slate-300:        #A8BABF;
  --color-slate-400:        #8FA4AB;
  --color-slate-500:        #7D949C;
  --color-slate-600:        #6B838C;
  --color-slate-700:        #506570;
  --color-slate-800:        #354850;
  --color-slate-900:        #1A2A30;

  /* Font family */
  --font-cairo: 'Cairo', sans-serif;
  --font-sans:  var(--font-cairo);
}

/* ─── Base Styles ────────────────────────────────────── */
:root {
  --background: #ffffff;
  --foreground: #1F2937;
  --font-sans:  var(--font-cairo);
}

body {
  background:  var(--background);
  color:       var(--foreground);
  font-family: var(--font-cairo), 'Cairo', Arial, sans-serif;
}

/* ─── Animations ─────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.animate-fade-in-up {
  animation: fadeInUp 0.5s ease-out both;
}

.animate-fade-in {
  animation: fadeIn 0.4s ease-out both;
}

.animate-pulse-dot {
  animation: pulse-dot 1.4s ease-in-out infinite;
}