/* ============================================================
   typography.css  —  PL-Signum Global Typography System
   ============================================================
   SINGLE SOURCE OF TRUTH for every font-related property.
   Do NOT hardcode font-family, font-size, font-weight,
   font-style, letter-spacing, or line-height anywhere else
   in the codebase — always reference a variable from here.
   ============================================================ */


/* ── Font Family ─────────────────────────────────────────── */
:root {
    --font: Arial;
}

/* Apply Arial to every element unconditionally */
*, *::before, *::after {
    font-family: var(--font);
}

html, body,
button, input, select, textarea, optgroup {
    font-family: var(--font);
}


/* ── Font Sizes ──────────────────────────────────────────── */
/*
   Scale derived from sizes actually used across the app.
   Semantic names are provided for the most common roles.
*/
:root {
    --fs-2xs: 8px; /* micro labels, tiny badges           */
    --fs-xs: 9px; /* uppercase category labels           */
    --fs-sm: 10px; /* metadata, timestamps, chips         */
    --fs-base: 11px; /* default body / table cell text      */
    --fs-md: 12px; /* secondary body, toolbar text        */
    --fs-lg: 13px; /* primary body, form inputs           */
    --fs-xl: 14px; /* panel headings, modal titles        */
    --fs-2xl: 15px; /* section headings                    */
    --fs-3xl: 16px; /* card headings                       */
    --fs-4xl: 18px; /* sub-page titles                     */
    --fs-5xl: 20px; /* page titles                         */
    --fs-6xl: 22px; /* KPI values (small)                  */
    --fs-7xl: 26px; /* KPI values (medium)                 */
    --fs-8xl: 28px; /* KPI values (large)                  */
    --fs-9xl: 32px; /* hero numbers                        */
    --fs-icon: 38px; /* empty-state icons                   */
    --fs-hero: 48px; /* large decorative icons              */
}


/* ── Font Weights ────────────────────────────────────────── */
:root {
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
}


/* ── Font Style ──────────────────────────────────────────── */
:root {
    --fst-normal: normal;
    --fst-italic: italic;
}


/* ── Letter Spacing ──────────────────────────────────────── */
:root {
    --ls-tighter: -0.02em; /* tight headings                 */
    --ls-tight: -0.01em;
    --ls-normal: 0;
    --ls-1: 0.01em;
    --ls-2: 0.02em;
    --ls-3: 0.03em;
    --ls-4: 0.04em;
    --ls-5: 0.05em;
    --ls-6: 0.06em; /* badge / chip labels            */
    --ls-7: 0.07em;
    --ls-8: 0.08em; /* uppercase labels (common)      */
    --ls-9: 0.09em;
    --ls-10: 0.10em; /* uppercase labels (wide)        */
    --ls-12: 0.12em; /* widest uppercase headings      */
}


/* ── Line Height ─────────────────────────────────────────── */
:root {
    --lh-none: 1; /* single-line numbers / KPIs      */
    --lh-tight: 1.2;
    --lh-snug: 1.3;
    --lh-normal: 1.4;
    --lh-relaxed: 1.5;
    --lh-loose: 1.6;
    --lh-looser: 1.7;
}


/* ── Base document defaults ──────────────────────────────── */
html, body {
    font-size: var(--fs-base);
    font-weight: var(--fw-normal);
    line-height: var(--lh-relaxed);
}