/**
 * Typography System
 * Centralized typography definitions for Build for India theme
 * 
 * @package BuildForIndia
 * @since 1.0.0
 */

/* ============================================
   Typography Scale (CSS Variables)
   ============================================ */
:root {
	/* Font Sizes */
	--bfi-font-xs: 0.75rem;      /* 12px - Labels, captions, breadcrumbs */
	--bfi-font-sm: 0.875rem;     /* 14px - Small text, metadata, body */
	--bfi-font-base: 1rem;       /* 16px - Base body text */
	--bfi-font-lg: 1.125rem;     /* 18px - Card titles, buttons */
	--bfi-font-xl: 1.25rem;      /* 20px - Section headings */
	--bfi-font-2xl: 1.5rem;      /* 24px - Page headings */
	--bfi-font-3xl: 1.875rem;    /* 30px - Hero headings */
	
	/* Line Heights */
	--bfi-line-tight: 1.25;      /* Headings */
	--bfi-line-normal: 1.5;      /* Standard text */
	--bfi-line-relaxed: 1.625;    /* Body text, descriptions */
	--bfi-line-loose: 1.75;      /* Long-form content */
	
	/* Font Weights */
	--bfi-weight-normal: 400;
	--bfi-weight-medium: 500;
	--bfi-weight-semibold: 600;
	--bfi-weight-bold: 700;
}

/* ============================================
   Typography Utility Classes
   ============================================ */

/* Labels & Captions */
.bfi-text-label {
	font-size: var(--bfi-font-xs);
	font-weight: var(--bfi-weight-semibold);
	line-height: var(--bfi-line-normal);
	color: #64748b;
}

@media (prefers-color-scheme: dark) {
	.bfi-text-label {
		color: #cbd5e1; /* slate-300 - improved from #94a3b8 for better contrast */
	}
}

/* Body Text */
.bfi-text-body {
	font-size: var(--bfi-font-sm);
	font-weight: var(--bfi-weight-normal);
	line-height: var(--bfi-line-relaxed);
	color: #475569;
}

@media (prefers-color-scheme: dark) {
	.bfi-text-body {
		color: #e2e8f0; /* slate-200 - improved from #cbd5e1 for better readability */
	}
}

/* Small Headings */
.bfi-text-heading-sm {
	font-size: var(--bfi-font-lg);
	font-weight: var(--bfi-weight-bold);
	line-height: var(--bfi-line-tight);
	color: #0f172a;
}

@media (prefers-color-scheme: dark) {
	.bfi-text-heading-sm {
		color: #ffffff;
	}
}

/* Medium Headings */
.bfi-text-heading-md {
	font-size: var(--bfi-font-xl);
	font-weight: var(--bfi-weight-bold);
	line-height: var(--bfi-line-tight);
	color: #0f172a;
}

@media (prefers-color-scheme: dark) {
	.bfi-text-heading-md {
		color: #ffffff;
	}
}

/* ============================================
   Standardized Element Styles
   ============================================ */

/* Breadcrumbs - Standardized */
.bfi-breadcrumb {
	font-size: var(--bfi-font-xs);
	font-weight: var(--bfi-weight-semibold);
	line-height: var(--bfi-line-normal);
	text-transform: capitalize;
}

.bfi-breadcrumb-link {
	color: #64748b;
	transition: color 0.2s;
}

.bfi-breadcrumb-link:hover {
	color: #00b8f5;
}

.bfi-breadcrumb-current {
	color: #0f172a;
}

@media (prefers-color-scheme: dark) {
	.bfi-breadcrumb-link {
		color: #cbd5e1; /* slate-300 - improved from #94a3b8 for better contrast */
	}
	
	.bfi-breadcrumb-current {
		color: #f8fafc; /* slate-50 - slightly softer than pure white */
	}
}

/* Filter Section Headers */
.bfi-filter-header {
	font-size: var(--bfi-font-sm);
	font-weight: var(--bfi-weight-semibold);
	line-height: var(--bfi-line-normal);
	color: #0f172a;
	text-transform: capitalize;
}

@media (prefers-color-scheme: dark) {
	.bfi-filter-header {
		color: #ffffff;
	}
}

/* Card Titles */
.bfi-card-title {
	font-size: var(--bfi-font-lg);
	font-weight: var(--bfi-weight-bold);
	line-height: var(--bfi-line-tight);
	color: #0f172a;
}

.bfi-card-title a {
	color: inherit;
	transition: color 0.2s;
}

.bfi-card-title a:hover {
	color: #002970;
}

@media (prefers-color-scheme: dark) {
	.bfi-card-title {
		color: #ffffff;
	}
	
	.bfi-card-title a:hover {
		color: #2b9dee;
	}
}

/* Card Metadata Labels */
.bfi-card-metadata-label {
	font-size: var(--bfi-font-xs);
	font-weight: var(--bfi-weight-semibold);
	line-height: var(--bfi-line-normal);
	color: #64748b;
	text-transform: capitalize;
}

@media (prefers-color-scheme: dark) {
	.bfi-card-metadata-label {
		color: #cbd5e1; /* slate-300 - improved from #94a3b8 for better contrast */
	}
}

/* Card Metadata Values */
.bfi-card-metadata-value {
	font-size: var(--bfi-font-xs);
	font-weight: var(--bfi-weight-medium);
	line-height: var(--bfi-line-normal);
	color: #0f172a;
}

@media (prefers-color-scheme: dark) {
	.bfi-card-metadata-value {
		color: #f8fafc; /* slate-50 - improved contrast */
	}
}

/* Buttons - Standardized */
.bfi-btn {
	font-size: var(--bfi-font-sm);
	font-weight: var(--bfi-weight-semibold);
	line-height: var(--bfi-line-normal);
}

/* Badge/Tag */
.bfi-badge {
	font-size: var(--bfi-font-xs);
	font-weight: var(--bfi-weight-medium);
	line-height: var(--bfi-line-normal);
}

/* ============================================
   Icon Size Standardization
   ============================================ */

/* Small Icons (Metadata, inline) */
.bfi-icon-sm {
	font-size: 1rem; /* 16px */
	width: 1rem;
	height: 1rem;
}

/* Medium Icons (Buttons, cards) */
.bfi-icon-md {
	font-size: 1.125rem; /* 18px */
	width: 1.125rem;
	height: 1.125rem;
}

/* Large Icons (Empty states, hero) */
.bfi-icon-lg {
	font-size: 1.5rem; /* 24px */
	width: 1.5rem;
	height: 1.5rem;
}

/* Extra Large Icons */
.bfi-icon-xl {
	font-size: 2rem; /* 32px */
	width: 2rem;
	height: 2rem;
}

/* ============================================
   Icon Consistency in Dark Mode (Phase 6)
   ============================================ */
@media (prefers-color-scheme: dark) {
	/* Standardize icon opacity and color */
	.material-symbols-outlined {
		opacity: 0.9;
	}
	
	/* Icon color in metadata - improve visibility */
	.text-xs + .material-symbols-outlined,
	.bfi-card-metadata-label + * .material-symbols-outlined,
	[class*="text-slate-500"] .material-symbols-outlined,
	[class*="text-slate-400"] .material-symbols-outlined {
		color: #94a3b8 !important; /* slate-400 */
		opacity: 1;
	}
	
	/* Icon color for primary actions - brighten */
	.text-\[\#00b8f5\].material-symbols-outlined,
	[class*="text-[#00b8f5]"] .material-symbols-outlined {
		filter: brightness(1.2);
	}
	
	/* Icon color for secondary actions in dark mode */
	.text-\[\#002970\].material-symbols-outlined,
	[class*="text-[#002970]"] .material-symbols-outlined {
		color: #38bdf8 !important; /* sky-400 in dark mode */
	}
	
	/* Ensure icon-text alignment */
	.material-symbols-outlined {
		vertical-align: middle;
	}
}