/* ============================================================================
   TYPOGRAPHY — Alnaql
   ============================================================================

   Role-based type system for Classical Arabic scholarly interface.

   Font roles (defined in variables.css):
     --font-display   Aref Ruqaa        Titles, hero, calligraphic headings
     --font-heading   Noto Naskh Arabic  Section headings, subheadings
     --font-primary   Amiri              Body text, reading passages
     --font-poetry    Scheherazade New   Poetry passages
     --font-ui        Noto Sans Arabic   Labels, buttons, nav, chrome
     --font-system    System stack       Fallback / non-Arabic UI
     --font-mono      IBM Plex Mono      Code, technical references

   All fonts are self-hosted (see styles/base/fonts.css), declared with
   font-display: swap. (They were previously served from Google Fonts.)

   ============================================================================ */


/* ========================================================================
   Base Typography
   ======================================================================== */

/* Fluid root font size — the single knob that scales the whole UI to the
   screen. Every font size (--font-size-*) and every spacing token (--space-*)
   is rem, so they all track this. At the 16px design size (≈≥1720px wide) the
   UI is byte-identical to before; narrower screens scale down smoothly so the
   same layout fits without cramping, with a 12.5px floor for readability.
   To tune: raise/lower the vw slope or the min/max. Media-query breakpoints are
   in px and are unaffected. */
html {
    font-size: clamp(12.5px, calc(6.4px + 0.56vw), 16px);
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
}


/* ========================================================================
   RTL (Right-to-Left) Support
   ======================================================================== */

.rtl {
    direction: rtl;
    text-align: start;
}

[lang="ar"],
[dir="rtl"] {
    direction: rtl;
    text-align: start;
}


/* ========================================================================
   Heading Defaults — uses heading face
   ======================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text-primary);
}

h1 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

h2 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

h3 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
}

h4 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
}

h5 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

h6 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}


/* ========================================================================
   Display Type — for hero/title elements
   ======================================================================== */

.display-text {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.display-xl {
    font-family: var(--font-display);
    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
}

.display-lg {
    font-family: var(--font-display);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}


/* ========================================================================
   UI Type — for labels, buttons, navigation chrome
   ======================================================================== */

.ui-text {
    font-family: var(--font-ui);
}

.ui-label {
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.01em;
}

.ui-caption {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* Buttons and interactive elements use UI face */
button, select, input {
    font-family: var(--font-ui);
}


/* ========================================================================
   Arabic Text Rendering
   ======================================================================== */

.arabic-text {
    font-family: var(--font-primary);
    line-height: var(--line-height-arabic);
    direction: rtl;
    text-align: justify;
    /* Full OpenType feature set for Arabic */
    font-feature-settings: "liga" 1, "calt" 1, "kern" 1, "rlig" 1;
    -webkit-font-feature-settings: "liga" 1, "calt" 1, "kern" 1, "rlig" 1;
    /* Optimize text rendering */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Poetry-specific styling */
.poetry-text {
    font-family: var(--font-poetry);
    line-height: var(--line-height-poetry);
    font-feature-settings: "liga" 1, "calt" 1, "kern" 1, "rlig" 1;
}


/* ========================================================================
   Text Utilities
   ======================================================================== */

.no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.text-wrap {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

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

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Logical text alignment (RTL-safe) */
.text-start {
    text-align: start;
}

.text-end {
    text-align: end;
}

.text-center {
    text-align: center;
}

.text-justify {
    text-align: justify;
}

/* Legacy aliases (backward compat — prefer .text-start/.text-end) */
.text-left {
    text-align: start;
}

.text-right {
    text-align: end;
}


/* ========================================================================
   Text Color Utilities
   ======================================================================== */

.text-primary {
    color: var(--color-text-primary);
}

.text-secondary {
    color: var(--color-text-secondary);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-success {
    color: var(--color-success);
}

.text-danger {
    color: var(--color-danger);
}


/* ========================================================================
   Font Weight Utilities
   ======================================================================== */

.font-normal {
    font-weight: var(--font-weight-normal);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

.font-semibold {
    font-weight: var(--font-weight-semibold);
}

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