/* ═══════════════════════════════════════════════════════════
   TURATHYA — Unified Typography System
   Premium auction-house visual language
   All sizes reference semantic tokens from variables.css
   ═══════════════════════════════════════════════════════════ */

/* ── Google Fonts (Arabic + Latin) ──────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500;600;700&family=Amiri:wght@400;700&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════ */
body {
    font-family: var(--font-body);
    font-size: var(--type-body);
    font-weight: var(--weight-normal);
    line-height: var(--leading-relaxed);
    color: var(--theme-text);
    background-color: var(--theme-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Arabic RTL body */
.rtl body,
body.rtl,
[lang="ar"] body {
    font-family: var(--font-arabic), var(--font-body);
    font-size: calc(var(--type-body) * var(--type-ar-boost));
    line-height: var(--leading-loose);
}

/* ═══════════════════════════════════════════════════════════
   HEADINGS — semantic, fluid, weighted correctly
   ═══════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    color: var(--theme-text);
    letter-spacing: var(--tracking-tight);
    margin-top: 0;
}

/* Page / hero titles */
h1 {
    font-size: var(--type-page-title);
    font-weight: var(--weight-normal);
    margin-bottom: var(--space-6);
}

/* Section headings */
h2 {
    font-size: var(--type-section-title);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-5);
}

/* Card titles / sub-section headings */
h3 {
    font-size: var(--type-card-title);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-4);
}

h4 {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-4);
}

h5 {
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    margin-bottom: var(--space-3);
}

h6 {
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    margin-bottom: var(--space-3);
}

/* ── RTL heading size boost ─────────────────────────────── */
.rtl h1, .rtl h2, .rtl h3, .rtl h4, .rtl h5, .rtl h6,
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3 {
    font-family: var(--font-arabic), var(--font-heading);
    letter-spacing: 0;
    line-height: var(--leading-snug);
}

/* ═══════════════════════════════════════════════════════════
   BODY TEXT
   ═══════════════════════════════════════════════════════════ */
p {
    font-size: var(--type-body);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-4);
    color: var(--theme-text);
}
p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════
   UTILITY SIZE CLASSES
   ═══════════════════════════════════════════════════════════ */
.text-2xs  { font-size: var(--text-2xs); }
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--type-subtitle); }
.text-base { font-size: var(--type-body); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }

/* ═══════════════════════════════════════════════════════════
   SEMANTIC COMPONENT TYPOGRAPHY
   ═══════════════════════════════════════════════════════════ */

/* ── Lot / Product card title ────────────────────────────── */
.lot-title,
.card-title,
.product-title {
    font-family: var(--font-heading);
    font-size: var(--type-card-title);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    color: var(--theme-text);
    letter-spacing: var(--tracking-tight);
}
.rtl .lot-title, .rtl .card-title {
    font-family: var(--font-arabic), var(--font-heading);
    font-size: calc(var(--type-card-title) * var(--type-ar-boost));
    letter-spacing: 0;
}

/* ── Category eyebrow label ─────────────────────────────── */
.lot-cat,
.card-cat,
.label,
.eyebrow {
    font-family: var(--font-body);
    font-size: var(--type-card-cat);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--theme-accent);
    line-height: 1;
}
.rtl .lot-cat, .rtl .label {
    letter-spacing: 0;
    font-size: calc(var(--type-card-cat) * var(--type-ar-boost));
}

/* ── Card subtitle / secondary text ─────────────────────── */
.lot-sub,
.card-subtitle,
.card-meta,
.text-muted {
    font-family: var(--font-body);
    font-size: var(--type-subtitle);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    color: var(--theme-text-muted);
}

/* ── Description text ───────────────────────────────────── */
.lot-desc,
.card-desc,
.description {
    font-family: var(--font-body);
    font-size: var(--type-body);
    font-weight: var(--weight-normal);
    line-height: var(--leading-relaxed);
    color: var(--theme-text-muted);
}

/* ── Metadata: lot numbers, dates ───────────────────────── */
.lot-num-tag,
.lot-price-label,
.caption,
.meta,
.text-xs {
    font-family: var(--font-body);
    font-size: var(--type-meta);
    font-weight: var(--weight-medium);
    line-height: var(--leading-normal);
    color: var(--theme-text-muted);
}

/* ── Price values ────────────────────────────────────────── */
.lot-price-value,
.price,
.bid-amount {
    font-family: var(--font-body);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--theme-text);
    letter-spacing: var(--tracking-tight);
}

/* ── Section titles ─────────────────────────────────────── */
.lot-section-title,
.section-title,
.page-section-title {
    font-family: var(--font-heading);
    font-size: var(--type-section-title);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--theme-text);
}
.rtl .lot-section-title, .rtl .section-title {
    font-family: var(--font-arabic), var(--font-heading);
    letter-spacing: 0;
}

/* Section sub-text */
.lot-section-sub,
.section-sub,
.section-description {
    font-family: var(--font-body);
    font-size: var(--type-section-sub);
    font-weight: var(--weight-normal);
    line-height: var(--leading-relaxed);
    color: var(--theme-text-muted);
}

/* ── Navigation ──────────────────────────────────────────── */
.nav-link,
.nav-item,
header a,
.header-nav a {
    font-family: var(--font-body);
    font-size: var(--type-nav);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    line-height: 1;
}

/* Mobile nav */
@media (max-width: 767px) {
    .nav-link,
    .mobile-nav a,
    .nav-item {
        font-size: var(--type-nav-mobile);
        letter-spacing: var(--tracking-wide);
    }
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn,
button[class*="btn"],
.button {
    font-family: var(--font-body);
    font-size: var(--type-button);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    line-height: 1;
}

/* ── Form inputs & labels ────────────────────────────────── */
input,
select,
textarea,
.form-input,
.form-select,
.form-textarea {
    font-family: var(--font-body);
    font-size: var(--type-form);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    color: var(--theme-text);
}

.form-label,
label {
    font-family: var(--font-body);
    font-size: var(--type-form-label);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--theme-text);
}

/* RTL form */
.rtl input, .rtl select, .rtl textarea,
.rtl .form-input, .rtl .form-label {
    font-family: var(--font-arabic), var(--font-body);
    font-size: calc(var(--type-form) * var(--type-ar-boost));
}

/* ── Footer ──────────────────────────────────────────────── */
footer,
.footer,
.site-footer {
    font-family: var(--font-body);
    font-size: var(--type-footer);
    line-height: var(--leading-relaxed);
    color: var(--theme-text-muted);
}

/* ═══════════════════════════════════════════════════════════
   TEXT UTILITY CLASSES
   ═══════════════════════════════════════════════════════════ */
.text-muted      { color: var(--theme-text-muted); }
.text-graphite   { color: var(--color-graphite); }
.text-accent,
.text-gold       { color: var(--theme-accent); }
.text-serif      { font-family: var(--font-heading); }
.text-sans       { font-family: var(--font-body); }
.text-left       { text-align: left; }
.text-center     { text-align: center; }
.text-right      { text-align: right; }

/* Font weights */
.font-light      { font-weight: var(--weight-light); }
.font-normal     { font-weight: var(--weight-normal); }
.font-medium     { font-weight: var(--weight-medium); }
.font-semibold   { font-weight: var(--weight-semibold); }
.font-bold       { font-weight: var(--weight-bold); }

/* Letter spacing */
.tracking-tight   { letter-spacing: var(--tracking-tight); }
.tracking-normal  { letter-spacing: var(--tracking-normal); }
.tracking-wide    { letter-spacing: var(--tracking-wide); }
.tracking-wider   { letter-spacing: var(--tracking-wider); }
.tracking-widest  { letter-spacing: var(--tracking-widest); }

/* ═══════════════════════════════════════════════════════════
   SPECIAL ELEMENTS
   ═══════════════════════════════════════════════════════════ */
.estimate {
    font-size: var(--type-subtitle);
    color: var(--color-graphite);
    font-weight: var(--weight-normal);
}

/* Links */
a {
    color: var(--theme-text);
    transition: color var(--duration-normal) var(--ease-elegant);
}
a:hover { color: var(--theme-accent); }
a:focus-visible {
    outline: 2px solid var(--theme-accent);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE HEADINGS
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
    /* All fluid tokens already scale via clamp() */
    /* Only override raw heading elements if needed */
    h1 { letter-spacing: -0.01em; }
    h2 { letter-spacing: -0.01em; }

    p { font-size: 14px; }

    .lot-section-title { font-size: clamp(1.2rem, 5vw, 1.6rem); }
}

@media (min-width: 1024px) {
    p { font-size: var(--type-body); }
}

/* ═══════════════════════════════════════════════════════════
   RTL GLOBAL (Arabic direction)
   ═══════════════════════════════════════════════════════════ */
.rtl, [dir="rtl"] {
    font-family: var(--font-arabic), var(--font-body);
}
.rtl h1, .rtl h2, .rtl h3, .rtl h4 {
    letter-spacing: 0;
    line-height: var(--leading-snug);
}
.rtl p, .rtl li, .rtl span {
    line-height: var(--leading-loose);
}
.rtl .btn, .rtl button {
    letter-spacing: 0;
}