/* ==========================================================================
   Premium Typography Consistency System
   Theme: Madrassa Theme - High Fidelity Typography & Hierarchy
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Font Families */
    --font-family-base: 'Noto Kufi Arabic', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Typographic Variables (Desktop Default) */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.85rem;
    --font-size-base: 0.95rem;
    --font-size-lg: 1.15rem;
    --font-size-xl: 1.35rem;
    --font-size-2xl: 1.65rem;

    --font-size-h1: 2.25rem;
    --font-size-h2: 1.75rem;
    --font-size-h3: 1.4rem;
    --font-size-h4: 1.15rem;
    --font-size-h5: 1rem;
    --font-size-h6: 0.88rem;

    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Line Heights */
    --line-height-base: 1.65;
    --line-height-heading: 1.3;
    --line-height-heading-tight: 1.2;

    /* Letter Spacings */
    --letter-spacing-base: normal;
    --letter-spacing-heading: -0.015em;
    --letter-spacing-heading-tight: -0.02em;
}

/* Fluid Typography / Responsive Adjustments for Tablets */
@media (max-width: 991px) {
    :root {
        --font-size-xs: 0.72rem;
        --font-size-sm: 0.82rem;
        --font-size-base: 0.92rem;
        --font-size-lg: 1.1rem;
        --font-size-xl: 1.25rem;
        --font-size-2xl: 1.5rem;

        --font-size-h1: 1.95rem;
        --font-size-h2: 1.55rem;
        --font-size-h3: 1.28rem;
        --font-size-h4: 1.08rem;
        --font-size-h5: 0.95rem;
        --font-size-h6: 0.85rem;
    }
}

/* Fluid Typography / Responsive Adjustments for Mobile Phones */
@media (max-width: 576px) {
    :root {
        --font-size-xs: 0.7rem;
        --font-size-sm: 0.8rem;
        --font-size-base: 0.9rem;
        --font-size-lg: 1.05rem;
        --font-size-xl: 1.2rem;
        --font-size-2xl: 1.35rem;

        --font-size-h1: 1.7rem;
        --font-size-h2: 1.38rem;
        --font-size-h3: 1.18rem;
        --font-size-h4: 1.02rem;
        --font-size-h5: 0.92rem;
        --font-size-h6: 0.82rem;
    }
}

/* ==========================================================================
   Global Font Assignment & Rendering Performance
   ========================================================================== */

* {
    font-family: var(--font-family-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body, html {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-base);
    letter-spacing: var(--letter-spacing-base);
}

/* ==========================================================================
   Semantic Headings Hierarchy
   ========================================================================== */

h1, .h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-heading-tight);
    letter-spacing: var(--letter-spacing-heading-tight);
    margin-bottom: 1.2rem;
}

h2, .h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
    margin-bottom: 1rem;
}

h3, .h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
    margin-bottom: 0.85rem;
}

h4, .h4 {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
    margin-bottom: 0.75rem;
}

h5, .h5 {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    margin-bottom: 0.65rem;
}

h6, .h6 {
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-medium);
    line-height: 1.45;
    margin-bottom: 0.5rem;
}

/* Paragraphs & Text Content */
p {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-base);
    margin-bottom: 0.85rem;
    color: var(--bs-body-color);
}

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

.text-xs { font-size: var(--font-size-xs) !important; font-weight: var(--font-weight-medium); }
.text-sm { font-size: var(--font-size-sm) !important; font-weight: var(--font-weight-medium); }
.text-md { font-size: var(--font-size-base) !important; font-weight: var(--font-weight-normal); }
.text-lg { font-size: var(--font-size-lg) !important; font-weight: var(--font-weight-semibold); }
.text-xl { font-size: var(--font-size-xl) !important; font-weight: var(--font-weight-bold); }
.text-2xl { font-size: var(--font-size-2xl) !important; font-weight: var(--font-weight-bold); }

.fw-light { font-weight: var(--font-weight-light) !important; }
.fw-normal { font-weight: var(--font-weight-normal) !important; }
.fw-medium { font-weight: var(--font-weight-medium) !important; }
.fw-semibold { font-weight: var(--font-weight-semibold) !important; }
.fw-bold { font-weight: var(--font-weight-bold) !important; }
.fw-extrabold { font-weight: var(--font-weight-extrabold) !important; }

/* Code and Monospace Fallback */
code, pre, kbd, samp, .font-monospace {
    font-family: var(--font-family-mono) !important;
}

/* ==========================================================================
   Component-Specific Typography Harmonization
   ========================================================================== */

/* Buttons */
.btn, button, input[type="button"], input[type="submit"] {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.01em;
}

.btn-sm {
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-semibold);
}

.btn-lg {
    font-size: 1.05rem !important;
    font-weight: var(--font-weight-bold);
}

/* Form Elements */
label, .form-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0.45rem;
}

input, textarea, select {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

input::placeholder, textarea::placeholder {
    font-weight: var(--font-weight-normal);
    opacity: 0.7;
}

/* Table Typographics */
table {
    font-size: var(--font-size-base);
}

table th {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
}

table td {
    font-weight: var(--font-weight-medium);
}

/* Badges */
.badge {
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.015em;
    padding: 0.4em 0.75em;
}

/* Alerts */
.alert {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

/* Breadcrumbs */
.breadcrumb {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

/* ==========================================================================
   Specific Layout Elements Overrides
   ========================================================================== */

/* Brand & Sidebar Typography */
.brand-text-large {
    font-size: 1.25rem !important;
    font-weight: var(--font-weight-extrabold) !important;
    line-height: 1.2;
}

.brand-text-sub {
    font-size: 0.72rem !important;
    font-weight: var(--font-weight-medium) !important;
    letter-spacing: 0.01em;
}

.nav-section-title {
    font-size: 0.78rem !important;
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sidebar-nav .nav-link {
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-semibold) !important;
}

.sidebar-nav .badge-count {
    font-size: 0.75rem !important;
    font-weight: var(--font-weight-bold) !important;
}

/* User Menu & Navigation Headers */
.user-nav-name {
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-semibold) !important;
}

.user-dropdown-name {
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-bold) !important;
}

.user-dropdown-email {
    font-size: var(--font-size-xs) !important;
    font-weight: var(--font-weight-medium) !important;
}

.user-dropdown-item span {
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-semibold) !important;
}

/* Homepage and Banners */
.hero-title {
    font-size: var(--font-size-h1) !important;
    font-weight: var(--font-weight-extrabold) !important;
}

.hero-subtitle {
    font-size: var(--font-size-lg) !important;
    font-weight: var(--font-weight-medium) !important;
}

.stage-card h3 {
    font-size: var(--font-size-h3) !important;
    font-weight: var(--font-weight-bold) !important;
}

.stage-badge {
    font-size: var(--font-size-xs) !important;
    font-weight: var(--font-weight-semibold) !important;
}

.level-item span {
    font-size: 0.98rem !important;
    font-weight: var(--font-weight-bold) !important;
}

.level-badge, .badge-soon {
    font-size: var(--font-size-xs) !important;
    font-weight: var(--font-weight-semibold) !important;
}

.level-title {
    font-size: var(--font-size-h2) !important;
    font-weight: var(--font-weight-extrabold) !important;
}

.section-title {
    font-size: var(--font-size-h3) !important;
    font-weight: var(--font-weight-bold) !important;
}

/* GPA Calculator Typography Details */
.calc-card-title {
    font-size: var(--font-size-lg) !important;
    font-weight: var(--font-weight-bold) !important;
}

.gpa-avg-num {
    font-size: 2.2rem !important;
    font-weight: var(--font-weight-extrabold) !important;
}

.gpa-avg-label {
    font-size: var(--font-size-xs) !important;
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: 0.05em;
}