/*
 * =========================================================
 * UI-LANG FONT
 * =========================================================
 *
 * ui-lang-font.css
 *
 * Semantic typography for the application.
 *
 *
 * ---------------------------------------------------------
 * PRINCIPLE
 * ---------------------------------------------------------
 *
 * Font selection is based on the meaning of text rather than
 * the component in which the text happens to appear.
 *
 * Components should consume semantic font variables rather
 * than selecting concrete font families directly.
 *
 *
 * ========================================================= */

/* =========================================================
   FONT ROLES
   ========================================================= */

:root {

    /*
     * -------------------------------------------------------
     * TITLE
     * -------------------------------------------------------
     *
     * Titles, headings and prominent textual elements.
     *
     * A relatively open, readable typeface gives headings
     * visual presence.
     */

    --ui-font-title:
        Inter,
        system-ui,
        sans-serif;


    /*
     * -------------------------------------------------------
     * BODY
     * -------------------------------------------------------
     *
     * Primary human-readable application text.
     */

    --ui-font-body:
        Inter,
        system-ui,
        sans-serif;


    /*
     * -------------------------------------------------------
     * LABEL
     * -------------------------------------------------------
     *
     * Short interface text:
     *
     *   buttons
     *   labels
     *   controls
     *   navigation
     *   compact UI terminology
     *
     * A condensed face works well here because labels are
     * generally short and benefit from compact horizontal
     * occupation.
     */

    --ui-font-label:
        "Roboto Condensed",
        "Arial Narrow",
        "Inter Tight",
        system-ui,
        sans-serif;


    /*
     * -------------------------------------------------------
     * CAPTION
     * -------------------------------------------------------
     *
     * Secondary explanatory text:
     *
     *   descriptions
     *   hints
     *   supporting information
     *   metadata
     *
     * The condensed face makes small supporting text compact
     * without requiring an excessively small font size.
     */

    --ui-font-caption:
        "Roboto Condensed",
        "Arial Narrow",
        "Inter Tight",
        system-ui,
        sans-serif;

    /*
     * -------------------------------------------------------
     * CODE
     * -------------------------------------------------------
     *
     * Program text intended to be read as source or syntax.
     */

    --ui-font-code:
        "JetBrains Mono",
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;


    /*
     * -------------------------------------------------------
     * DATA
     * -------------------------------------------------------
     *
     * Machine-oriented application values:
     *
     *   identifiers
     *   peer IDs
     *   hashes
     *   addresses
     *   keys
     *   timestamps
     *   structured values
     */

    --ui-font-data:
        "JetBrains Mono",
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;


    /*
     * -------------------------------------------------------
     * ICON
     * -------------------------------------------------------
     *
     * Unicode characters used as visual symbols.
     *
     * This is intentionally independent from surrounding
     * text because Unicode glyph coverage and visual
     * consistency vary substantially between font families.
     *
     * Size is NOT defined here.
     */

    --ui-font-icon:
        "Segoe UI Symbol",
        "Noto Sans Symbols 2",
        "Noto Sans Symbols",
        "Apple Symbols",
        sans-serif;
}


/* =========================================================
   SEMANTIC HTML
   ========================================================= */


/*
 * Primary application text.
 */

html,
body {
    font-family: var(--ui-font-body);
}


/*
 * Prominent textual hierarchy.
 */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--ui-font-title);
}


/*
 * Interface controls.
 */

button,
input,
select,
textarea {
    font-family: var(--ui-font-label);
}


/*
 * Supporting text.
 */

small {
    font-family: var(--ui-font-caption);
}


/*
 * Program text.
 */

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

.caption {
    font-family: var(--ui-font-caption);
    font-weight: 300;
}

/* =========================================================
   ICON
   =========================================================
 *
 * The semantic .icon class identifies a visual Unicode
 * symbol.
 *
 * It does not define:
 *
 *   - font size
 *   - color
 *   - weight
 *   - spacing
 *
 * Those remain separate concerns.
 */

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


/* =========================================================
   DATA
   =========================================================
 *
 * Machine-oriented application data has no universal HTML
 * element, so .data provides an explicit semantic escape
 * hatch.
 */

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


/* =========================================================
   DESIGN BOUNDARY
 * =========================================================
 *
 * This stylesheet defines typography roles only.
 *
 * It does not define:
 *
 *   - font sizes
 *   - font weights
 *   - colors
 *   - line heights
 *   - letter spacing
 *   - component appearance
 *   - layout
 *
 * Those concerns remain independent semantic layers.
 *
 * ========================================================= */