/* Brand Colors and Typography - Saudi University Website Design */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

:root {
  /* Brand Colors - Can be changed via admin panel */
  --brand-green: #2f3a30;      /* darker olive */
  --brand-green-dark: #222a23; /* deepest shade for hovers */
  --brand-green-light: #3b4a3d;/* slightly lighter but still deep */
  --brand-beige: #B7A688;
  --brand-gold: #b7a688;
  --brand-cream: #F7E6C4;
  
  /* RGB values for inline styles */
  --brand-green-r: 47;
  --brand-green-g: 58;
  --brand-green-b: 48;
  
  /* UI Colors */
  --primary: var(--brand-green);
  --primary-dark: #454e44;
  --primary-light: #657465;
  --secondary: #B7A688;
  --secondary-foreground: #1a1a1a;
  --muted: #F7E6C4;
  --muted-foreground: #6b7280;
  --accent: #9ca3af;
  --accent-foreground: #1a1a1a;
  
  /* Typography */
  --font-family: 'Tajawal', sans-serif;
  --font-size-base: 16px;
  
  /* Borders */
  --border-color: #e5e7eb;
}

/* Global Typography */
body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
}

/* Utility Classes */
.bg-primary {
  background-color: var(--brand-green) !important;
}

.bg-primary-dark {
  background-color: var(--brand-green-dark) !important;
}

.bg-primary-light {
  background-color: var(--brand-green-light) !important;
}

.text-primary {
  color: var(--brand-green) !important;
}

.border-primary {
  border-color: var(--brand-green) !important;
}

.bg-secondary {
  background-color: var(--brand-beige) !important;
}

.text-secondary {
  color: var(--brand-beige) !important;
}

.bg-muted {
  background-color: var(--brand-cream) !important;
}

.text-muted {
  color: var(--muted-foreground) !important;
}

/* Buttons */
.btn-primary {
  background-color: var(--brand-green);
  color: white;
  border-color: var(--brand-green);
}

.btn-primary:hover {
  background-color: var(--brand-green-dark);
  border-color: var(--brand-green-dark);
}

/* Links */
a.text-primary,
a:hover.text-primary {
  color: var(--brand-green) !important;
}

/* Admin Panel Specific */
.admin-sidebar .active {
  background-color: var(--brand-green) !important;
  color: white !important;
}

.admin-sidebar .active:hover {
  background-color: var(--brand-green-dark) !important;
}