/* ===== CLARITYPREP SHARED COLOR SYSTEM =====
   This file defines all global colors and design tokens
   used across all pages (index, about, scholarships, etc.)
   Import this file first in all pages to ensure consistency.
   ============================================ */

:root {
  /* Background Colors */
  --bg-primary: #f7fafc;        /* Main page background - light gray-blue */
  --bg-secondary: #ffffff;      /* Card/content background - white */
  --bg-soft: #eef6ff;           /* Soft blue tint for sections */
  --bg-accent: #fff4ec;         /* Soft peach tint for sections */
  --bg-accent-green: #eefaf4;   /* Soft green tint for sections */
  
  /* Text Colors */
  --text-primary: #0f172a;      /* Main text - dark navy */
  --text-secondary: #4b5563;    /* Secondary text - muted gray-blue */
  --text-tertiary: #6b7280;     /* Tertiary text - lighter gray */
  --text-light: #9ca3af;        /* Light gray text */
  --text-inverse: #f8fafc;      /* Text on dark backgrounds */
  
  /* Border Colors */
  --border-subtle: #e5e7eb;     /* Light gray border - 1px dividers */
  --border-strong: #d1d5db;     /* Stronger gray border */
  
  /* Accent Colors */
  --accent-blue: #2563eb;       /* Primary blue for buttons/CTAs */
  --accent-blue-light: #dbeafe; /* Light blue for button borders */
  --accent-blue-soft: #e0ecff;  /* Soft blue for backgrounds */
  --accent-gold: #fbbf24;       /* Gold for numbers, accents, highlights */
  --accent-red: #ef4444;        /* Red for danger/alerts */
  
  /* Gradient Colors */
  --gradient-blue: linear-gradient(135deg, #2563eb, #1d4ed8);
  
  /* Shadows */
  --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-light: 0 4px 10px rgba(15, 23, 42, 0.12);
  --shadow-medium: 0 10px 24px rgba(15, 23, 42, 0.06);
  
  /* Border Radius */
  --radius-lg: 18px;            /* Large border radius */
  --radius-md: 12px;            /* Medium border radius */
  --radius-sm: 10px;            /* Small border radius */
  --radius-pill: 999px;         /* Fully rounded (buttons, badges) */
  
  /* Typography */
  --font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Spacing (used for consistent padding/margins) */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 28px;
  --spacing-4xl: 32px;
  
  /* Z-Index */
  --z-header: 40;
  --z-modal: 50;
  
  /* Transitions */
  --transition-fast: 0.12s ease;
  --transition-normal: 0.35s ease;
}

/* Ensure all pages inherit the font family and text color */
body {
  font-family: var(--font-family);
  color: var(--text-primary);
  background-color: var(--bg-primary);
}

/* Utility Classes for Quick Styling */
.bg-primary {
  background-color: var(--bg-primary);
}

.bg-secondary {
  background-color: var(--bg-secondary);
}

.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-accent-gold {
  color: var(--accent-gold);
}

.text-accent-blue {
  color: var(--accent-blue);
}

.border-subtle {
  border: 1px solid var(--border-subtle);
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

.rounded-md {
  border-radius: var(--radius-md);
}

.rounded-pill {
  border-radius: var(--radius-pill);
}

.shadow-soft {
  box-shadow: var(--shadow-soft);
}