/* 
 * Unified Typography System
 * Single source of truth for all font sizes across the application
 * Font Family: Inter (from Figma design system)
 * - Default: 0.82em for all elements
 * - Headers: 1em (differentiated by color and bold only)
 */

/* Base font family from Figma - Inter */
html {
    font-size: 16px; /* Base size for rem calculations */
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 0.76rem !important; /* 13.6px at default 16px base */
}

/* Apply Inter to text elements only - don't use universal selector to avoid breaking icons */
body, p, span, div, a, label, li, small,
h1, h2, h3, h4, h5, h6,
input, textarea, select, button,
.form-control, .form-select, .form-check-label, .btn,
.nav-link, .navbar-text, .navbar-brand,
.dropdown-item, .dropdown-menu,
.card-title, .card-text, .card-body,
.modal-title, .modal-body, .modal-footer,
.alert, .badge, .pill,
table, th, td {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Ensure Font Awesome icons ALWAYS use their font */
i, i[class*="fa"], .fa, .fas, .far, .fal, .fab, .fad, [class*="fa-"] {
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important; /* Font Awesome solid icons need weight 900 */
}

i.far {
    font-weight: 400 !important; /* Regular icons */
}

i.fal {
    font-weight: 300 !important; /* Light icons */
}

/* Reset headers to same size - use color and bold to differentiate */
h1, h2, h3, h4{
    font-size: 1.4rem !important; 
}
h5{
    font-size: 1rem !important; 
}
h6 {
    font-size: .9rem !important;
}

/* Form controls - MUST override Bootstrap with higher specificity */
input, textarea, select, button,
.form-control, .form-select, .form-check-label, .btn,
input.form-control, textarea.form-control, select.form-select,
.form-floating > .form-control,
.form-floating > label {
    font-size: 0.76rem !important; /* 13.6px */
}

/* Form controls - MUST override Bootstrap with higher specificity */
input, textarea, select, button,
.form-control, .form-select, .form-check-label, .btn,
input.form-control, textarea.form-control, select.form-select,
.form-floating > .form-control,
.form-floating > label {
    font-size: 0.76rem !important; /* 13.6px */
}

/* Tables */
table, th, td {
    font-size: 0.76rem !important;
}

/* Badges and pills */
.badge, .pill {
    font-size: 0.76rem !important;
}

/* Modals */
.modal-title{
    font-size: 1rem !important;
}
.modal-body, .modal-footer {
    font-size: 0.76rem !important;
}

.identity-content .form-floating .form-control
{
    font-size: 0.76rem !important;
}

/* Cards */
.card-title{
    font-size: 1rem !important;
}
.card-text, .card-body {
    font-size: 0.76rem !important;
}

/* Nav and navigation elements */
.nav-link, .navbar-text, .navbar-brand {
    font-size: 0.76rem !important;
}

/* Dropdown menus */
.dropdown-item, .dropdown-menu {
    font-size: 0.76rem !important;
}

/* Alerts */
.alert {
    font-size: 0.76rem !important;
}

/* All text elements */
p, span, div, a, label, li, small {
    font-size: 0.76rem !important;
}