/* =====================================================================
   Limra ERP — Enterprise Typography System
   Version: 2.0

   Features
   --------
   ✓ Arabic / English Auto Font Switching
   ✓ Accessibility Friendly
   ✓ Enterprise DataTables
   ✓ Financial Typography
   ✓ Density System
   ✓ Responsive Typography
   ✓ Dark Mode Support
   ✓ QuickGrid Optimized
   ✓ No !important

   Dependencies
   ------------
   tokens.css owns:
   --primary
   --text-primary
   --text-secondary
   --text-muted
   --table-border
   ===================================================================== */

/* ==========================================================
   1. TYPOGRAPHY TOKENS
   ========================================================== */

:root {
    /* Fonts */
    --font-ar: "Cairo", "Segoe UI", Tahoma, sans-serif;
    --font-en: "Inter", "Segoe UI", Tahoma, sans-serif;
    --font-code: "Cairo",Calibri, monospace;
    /* Active Font */
    --font-family: var(--font-ar);
    /* Font Sizes */
    --fs-xs: .6875rem;
    --fs-sm: .75rem;
    --fs-md: .8125rem;
    --fs-base: .9375rem;
    --fs-lg: .9375rem;
    --fs-xl: 1rem;
    --fs-2xl: 1.125rem;
    --fs-3xl: 1.25rem;
    --fs-4xl: 1.5rem;
    --fs-5xl: 1.75rem;
    --fs-6xl: 2rem;
    /* Font Weights */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    /* Line Heights */
    --lh-tight: 1.2;
    --lh-snug: 1.35;
    --lh-normal: 1.5;
    --lh-relaxed: 1.7;
    --lh-loose: 1.9;
    /* Tracking */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;
    /* Density */
    --density: 1;
    /* Table Typography */
    --table-font-size: var(--fs-xl);
    --table-header-size: var(--fs-lg);
    --table-font-weight: var(--fw-bold);
    --table-header-weight: var(--fw-semibold);
    /* Colors */
    --text-heading: #172033;
    --text-disabled: #b8c0cc;
}

[data-bs-theme="dark"],
[data-theme="dark"] {
    --text-heading: #f1f5f9;
    --text-disabled: #5e6877;
}

/* ==========================================================
   2. LANGUAGE AUTO SWITCH
   ========================================================== */

html[lang="ar"],
html[dir="rtl"],
html[data-dir="rtl"],
.rtl {
    --font-family: var(--font-ar);
}

html[lang="en"],
html[dir="ltr"],
html[data-dir="ltr"],
.ltr {
    --font-family: var(--font-en);
}

/* ==========================================================
   3. GLOBAL TYPOGRAPHY
   ========================================================== */

html,
body {
    font-family: var(--font-family);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ==========================================================
   4. HEADINGS
   ========================================================== */

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    color: var(--text-heading);
    line-height: var(--lh-tight);
}

h1,
.h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-tight);
}

h2,
.h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-tight);
}

h3,
.h3 {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
}

h4,
.h4 {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
}

h5,
.h5 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
}

h6,
.h6 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
}

/* ==========================================================
   5. NAVIGATION
   ========================================================== */

.sidebar,
.nav-link,
.dropdown-menu {
    font-size: var(--fs-lg);
}

.sidebar,
.nav-link {
    font-weight: var(--fw-bold);
}

/* ==========================================================
   6. LINKS
   ========================================================== */

a {
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

    a:hover {
        text-decoration-thickness: 2px;
    }

/* ==========================================================
   7. CARDS / MODALS / TABS
   ========================================================== */

.card-title,
.modal-title,
.invoice-title {
    color: var(--text-heading);
    font-weight: var(--fw-bold);
}

.card-title,
.modal-title {
    font-size: var(--fs-xl);
}

.invoice-title {
    font-size: var(--fs-3xl);
}

.card-header {
    font-weight: var(--fw-bold);
}

.card-header,
.alert,
.nav-tabs .nav-link {
    font-size: var(--fs-md);
}

.nav-tabs .nav-link {
    font-weight: var(--fw-bold);
}

.breadcrumb {
    font-size: var(--fs-sm);
}

.badge {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
}

/* ==========================================================
   8. FORMS
   ========================================================== */

label,
.form-label,
.col-form-label {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
}

input,
select,
textarea,
.form-control,
.form-select,
.input-group-text {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
}

::placeholder {
    opacity: .65;
}

.validation-message,
.field-validation-error {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
}

/* ==========================================================
   9. BUTTONS
   ========================================================== */

button,
.btn {
    font-family: inherit;
}