/**
 * Thmanyah Typography System — Masar Platform
 * Sans: UI | SerifDisplay: hero/short titles | SerifText: body
 */

:root {
    --font-sans: 'ThmanyahSans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'ThmanyahSerifDisplay', 'ThmanyahSerifText', Georgia, serif;
    --font-text: 'ThmanyahSerifText', Georgia, 'Times New Roman', serif;

    --font-family: var(--font-sans);
    --font-family-body: var(--font-text);
    --font-family-heading: var(--font-display);

    --font-size-display-xl: clamp(2rem, 4vw, 3.25rem);
    --font-size-display-lg: clamp(1.75rem, 3vw, 2.5rem);
    --line-height-text: 1.75;
    --line-height-ui: 1.5;
    --line-height-display: 1.2;
}

/* Base reading surface */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-text);
    line-height: var(--line-height-text);
}

/* Display — hero & primary page titles (short copy only) */
h1,
.display-hero,
.page-hero h1,
.page-hero .page-hero__title,
.masar-hero__title,
.hero-title,
.hero__title,
.ms-hero__title,
.ms-landing-hero h1,
.login-brand__title,
.brand-title {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--line-height-display);
    letter-spacing: -0.02em;
}

/* Decorative display — brand moments, welcome, splash (selective kashida/ligatures) */
.thmanyah-decorative,
.display-decorative,
.brand-wordmark,
.msl-brand span,
.ms-hero__title--decorative,
.page-hero--decorative .page-hero__title,
.splash-title {
    font-family: var(--font-display);
    font-weight: 900;
    line-height: var(--line-height-display);
    letter-spacing: -0.03em;
    font-feature-settings: 'calt' 1, 'liga' 1, 'dlig' 1;
}

/* Section headings */
h2,
.section-title,
.masar-section-title,
.page-hero h2,
.card-hero-title {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: var(--line-height-display);
}

/* UI headings & card titles */
h3,
h4,
h5,
h6,
.card-title,
.modal-title,
.offcanvas-title,
.navbar-brand,
.sidebar-brand,
.stat-value,
.table thead th {
    font-family: var(--font-sans);
    font-weight: 600;
    line-height: var(--line-height-ui);
}

/* UI chrome */
button,
.btn,
input,
select,
textarea,
label,
.form-label,
.form-control,
.nav,
.navbar,
.sidebar,
.dropdown-menu,
.badge,
.pagination,
.toast,
.alert,
.breadcrumb,
.tab,
.chip,
.masar-btn,
[role='button'] {
    font-family: var(--font-sans);
    line-height: var(--line-height-ui);
}

/* Data & numbers — prices, grades, stats */
.price,
.amount,
.stat-number,
.grade-value,
[data-numeric='true'],
.tabular-nums {
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* Long-form content */
p,
.lead,
.description,
.text-body,
.prose,
.rich-html,
.announcement-body,
.forum-post-body,
.unit-description,
.card-text,
.modal-body,
.help-text,
small.text-muted {
    font-family: var(--font-text);
    line-height: var(--line-height-text);
}

/* Saudi Riyal symbol — use ﷼ not ر.س / ري */
.sar-symbol::after,
[data-currency='sar']::after,
.currency-sar::after {
    content: '﷼';
    font-family: var(--font-sans);
    font-weight: 500;
    margin-inline-start: 0.2em;
}

/* Utility classes */
.font-sans { font-family: var(--font-sans) !important; }
.font-display { font-family: var(--font-display) !important; }
.font-text { font-family: var(--font-text) !important; }
.font-decorative { font-family: var(--font-display) !important; font-weight: 900; font-feature-settings: 'calt' 1, 'liga' 1, 'dlig' 1; }

.text-display-xl {
    font-family: var(--font-display);
    font-size: var(--font-size-display-xl);
    font-weight: 700;
    line-height: var(--line-height-display);
}

.text-display-lg {
    font-family: var(--font-display);
    font-size: var(--font-size-display-lg);
    font-weight: 600;
    line-height: var(--line-height-display);
}

/* Bootstrap alignment */
.table,
.list-group,
.input-group-text {
    font-family: var(--font-sans);
}

/* Monospace untouched */
pre,
code,
kbd,
samp,
.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}