/**
 * ============================================================
 * GLOBAL TYPOGRAPHY SYSTEM
 * ============================================================
 *
 * File    : /public_html/assets/css/core/typography.css
 * Version : 1.0.0 GLOBAL PRODUCTION
 * PHP     : 8.2+
 *
 * Responsibility:
 * ✓ Global font families
 * ✓ Headings
 * ✓ Body text
 * ✓ Links
 * ✓ Lists
 * ✓ Code / preformatted text
 * ✓ Bengali / multilingual typography
 * ✓ Text utilities
 *
 * Does NOT contain:
 * ✗ Buttons
 * ✗ Forms
 * ✗ Cards
 * ✗ Navigation
 * ✗ Layout
 * ✗ Page-specific styling
 * ✗ Component styling
 *
 * ============================================================
 */


/* ============================================================
   1. FONT STACKS
   ============================================================ */

:root {

    /* --------------------------------------------------------
       Primary UI font
       -------------------------------------------------------- */

    --font-family-base:
        "Inter",
        "Noto Sans",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;


    /* --------------------------------------------------------
       Heading font
       -------------------------------------------------------- */

    --font-family-heading:
        "Inter",
        "Noto Sans",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;


    /* --------------------------------------------------------
       Bengali / multilingual font
       -------------------------------------------------------- */

    --font-family-bengali:
        "Noto Sans Bengali",
        "Noto Sans",
        sans-serif;


    /* --------------------------------------------------------
       Monospace
       -------------------------------------------------------- */

    --font-family-mono:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;
}


/* ============================================================
   2. GLOBAL BODY TYPOGRAPHY
   ============================================================ */

html {
    font-family: var(--font-family-base);
    font-size: 100%;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-family-base);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
   3. HEADINGS
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0.75rem;

    font-family: var(--font-family-heading);
    font-weight: 700;
    line-height: 1.2;

    text-wrap: balance;
}

h1 {
    font-size: clamp(2rem, 4vw, 3rem);
}

h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
}

h3 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
}

h4 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
}

h5 {
    font-size: 1.125rem;
}

h6 {
    font-size: 1rem;
}


/* ============================================================
   4. PARAGRAPHS
   ============================================================ */

p {
    margin-top: 0;
    margin-bottom: 1rem;

    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
}


/* ============================================================
   5. STRONG / EMPHASIS
   ============================================================ */

strong,
b {
    font-weight: 700;
}

em,
i {
    font-style: italic;
}

small {
    font-size: 0.875em;
}


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

a {
    font-family: inherit;
    font-weight: inherit;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.15em;
}


/* ============================================================
   7. LISTS
   ============================================================ */

ul,
ol {
    line-height: 1.7;
}

li {
    line-height: inherit;
}


/* ============================================================
   8. QUOTATIONS
   ============================================================ */

blockquote {
    margin: 1.5rem 0;

    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.7;
}

q {
    font-style: italic;
}


/* ============================================================
   9. CODE / MONOSPACE
   ============================================================ */

code,
kbd,
pre,
samp {
    font-family: var(--font-family-mono);
}

code,
kbd {
    font-size: 0.875em;
}

pre {
    font-size: 0.875rem;
    line-height: 1.6;
}


/* ============================================================
   10. TABLE TYPOGRAPHY
   ============================================================ */

table {
    font-size: 0.9375rem;
}

th {
    font-weight: 700;
}

td {
    font-weight: 400;
}


/* ============================================================
   11. FORM TYPOGRAPHY
   ============================================================ */

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}


/* ============================================================
   12. LABEL / CAPTION TYPOGRAPHY
   ============================================================ */

label {
    font-weight: 500;
}

caption {
    font-size: 0.875rem;
    line-height: 1.5;
}


/* ============================================================
   13. MULTILINGUAL / BENGALI SUPPORT
   ============================================================ */

:lang(bn),
:lang(bd) {
    font-family: var(--font-family-bengali);
    line-height: 1.8;
}

:lang(bn) h1,
:lang(bn) h2,
:lang(bn) h3,
:lang(bn) h4,
:lang(bn) h5,
:lang(bn) h6 {
    font-family: var(--font-family-bengali);
    line-height: 1.35;
}

:lang(bn) p,
:lang(bn) li {
    line-height: 1.9;
}


/* ============================================================
   14. RTL SUPPORT
   ============================================================ */

[dir="rtl"] {
    text-align: right;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    text-align: inherit;
}


/* ============================================================
   15. TEXT WRAPPING
   ============================================================ */

.text-balance {
    text-wrap: balance;
}

.text-pretty {
    text-wrap: pretty;
}

.text-nowrap {
    white-space: nowrap;
}

.text-break {
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* ============================================================
   16. FONT WEIGHT UTILITIES
   ============================================================ */

.fw-light {
    font-weight: 300;
}

.fw-normal {
    font-weight: 400;
}

.fw-medium {
    font-weight: 500;
}

.fw-semibold {
    font-weight: 600;
}

.fw-bold {
    font-weight: 700;
}

.fw-extrabold {
    font-weight: 800;
}

.fw-black {
    font-weight: 900;
}


/* ============================================================
   17. FONT SIZE UTILITIES
   ============================================================ */

.fs-xs {
    font-size: 0.75rem;
}

.fs-sm {
    font-size: 0.875rem;
}

.fs-md {
    font-size: 1rem;
}

.fs-lg {
    font-size: 1.125rem;
}

.fs-xl {
    font-size: 1.25rem;
}

.fs-2xl {
    font-size: 1.5rem;
}

.fs-3xl {
    font-size: 1.875rem;
}

.fs-4xl {
    font-size: 2.25rem;
}


/* ============================================================
   18. TEXT TRANSFORMATION
   ============================================================ */

.text-uppercase {
    text-transform: uppercase;
}

.text-lowercase {
    text-transform: lowercase;
}

.text-capitalize {
    text-transform: capitalize;
}


/* ============================================================
   19. LETTER SPACING
   ============================================================ */

.tracking-tight {
    letter-spacing: -0.025em;
}

.tracking-normal {
    letter-spacing: 0;
}

.tracking-wide {
    letter-spacing: 0.025em;
}

.tracking-wider {
    letter-spacing: 0.05em;
}


/* ============================================================
   20. LINE HEIGHT
   ============================================================ */

.leading-none {
    line-height: 1;
}

.leading-tight {
    line-height: 1.25;
}

.leading-normal {
    line-height: 1.5;
}

.leading-relaxed {
    line-height: 1.75;
}

.leading-loose {
    line-height: 2;
}


/* ============================================================
   21. ACCESSIBILITY
   ============================================================ */

::selection {
    background: currentColor;
    color: Canvas;
}


/* ============================================================
   22. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }
}


/* ============================================================
   END OF GLOBAL TYPOGRAPHY SYSTEM
   ============================================================ */