@import url('https://fonts.googleapis.com/css2?family=Courgette&family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

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

:root {
  --font-inter: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-jakarta: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-courgette: 'Courgette', cursive, sans-serif;

  --color-brand-yellow: #EEB808;
  --color-brand-yellow-hover: #D8A404;
  --color-brand-red: #DC2626;
  --color-brand-green: #234338;
  --color-brand-black: #000000;
  --color-brand-dark: #111827;

  --color-surface-bg: #F8FAFC;
  --color-surface-card: #FFFFFF;
  --color-surface-footer: #000000;

  --color-text-primary: #111827;
  --color-text-secondary: #374151;
  --color-text-muted: #6B7280;
}

body, input, textarea, select, button {
  color: var(--color-text-primary);
  background-color: var(--color-surface-bg);
  font-family: var(--font-inter);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-jakarta);
}

/* Global Tabular Numbers for Data Tables, Statistics Cards & Numerical Metrics */
table, th, td, .tabular-nums, [data-tabular], .stat-value, .stat-number, .numeric-metric {
  font-variant-numeric: tabular-nums;
}

.font-courgette {
  font-family: var(--font-courgette) !important;
}

/* Rich Text Editor Output Styling */
.ck-content-display h1 { @apply text-3xl font-bold mt-8 mb-4 text-gray-900; }
.ck-content-display h2 { @apply text-2xl sm:text-3xl font-bold mt-6 mb-4 text-gray-900 tracking-tight; }
.ck-content-display h3 { @apply text-xl font-bold mt-4 mb-2 text-gray-900; }
.ck-content-display p { @apply text-sm sm:text-base leading-relaxed text-gray-800 mb-4; }
.ck-content-display ul { @apply list-disc pl-6 space-y-2 mb-4; }
.ck-content-display ol { @apply list-decimal pl-6 space-y-2 mb-4; }
.ck-content-display li { @apply text-sm sm:text-base text-gray-700; }
.ck-content-display strong, .ck-content-display b { @apply font-bold text-gray-900; }
.ck-content-display a { @apply text-[#D8A404] hover:underline font-medium; }
.ck-content-display blockquote { @apply border-l-4 border-[#FECE00] pl-4 italic text-gray-600 my-4; }