/* =========================================================
   JAMAICA ELECTORAL ANALYTICS
   TYPOGRAPHY
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

html {
    font-family:
        var(--font-sans);

    font-size:
        100%;

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;
}


/* =========================================================
   BODY
   ========================================================= */

body {
    font-family:
        var(--font-sans);

    font-size:
        14px;

    font-weight:
        400;

    line-height:
        1.5;

    color:
        var(--text-primary);

    background:
        var(--page-bg);
}


/* =========================================================
   HEADINGS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;

    color:
        var(--text-primary);

    font-family:
        var(--font-sans);

    font-weight:
        750;

    line-height:
        1.15;

    letter-spacing:
        -0.02em;
}


h1 {
    font-size:
        2rem;

    font-weight:
        800;

    letter-spacing:
        -0.035em;
}


h2 {
    font-size:
        1.35rem;

    font-weight:
        780;

    letter-spacing:
        -0.025em;
}


h3 {
    font-size:
        1rem;

    font-weight:
        750;

    letter-spacing:
        -0.015em;
}


h4 {
    font-size:
        0.88rem;

    font-weight:
        750;
}


h5 {
    font-size:
        0.76rem;

    font-weight:
        750;
}


h6 {
    font-size:
        0.68rem;

    font-weight:
        750;
}


/* =========================================================
   BODY COPY
   ========================================================= */

p {
    margin: 0;

    color:
        var(--text-secondary);

    line-height:
        1.55;
}


strong,
b {
    color:
        inherit;

    font-weight:
        750;
}


em,
i {
    font-style:
        italic;
}


/* =========================================================
   LINKS
   ========================================================= */

a {
    color:
        inherit;

    text-decoration:
        none;

    text-decoration-thickness:
        1px;

    text-underline-offset:
        2px;

    transition:
        color
        var(--transition-fast);
}


a:hover {
    color:
        var(--brand-green);
}


/* =========================================================
   SMALL TEXT
   ========================================================= */

small {
    font-size:
        0.78em;

    line-height:
        1.4;
}


/* =========================================================
   LABELS
   ========================================================= */

label {
    color:
        var(--text-secondary);

    font-size:
        0.72rem;

    font-weight:
        650;

    line-height:
        1.3;
}


/* =========================================================
   BUTTONS + CONTROLS
   ========================================================= */

button,
input,
select,
textarea {
    font:
        inherit;
}


button {
    font-weight:
        650;
}


/* =========================================================
   TABLE TYPOGRAPHY
   ========================================================= */

table {
    font-size:
        0.78rem;
}


th {
    color:
        var(--text-secondary);

    font-size:
        0.68rem;

    font-weight:
        750;

    line-height:
        1.25;

    letter-spacing:
        0.01em;
}


td {
    color:
        var(--text-primary);

    line-height:
        1.4;
}


/* =========================================================
   NUMERIC DATA
   Helps dashboard values line up cleanly
   ========================================================= */

.data-number,
.metric-value,
.stat-value,
.numeric {
    font-variant-numeric:
        tabular-nums;

    font-feature-settings:
        "tnum" 1;
}


/* =========================================================
   MUTED / SECONDARY
   ========================================================= */

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


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


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


.text-brand {
    color:
        var(--brand-green);
}


/* =========================================================
   EYEBROW / SECTION LABEL
   ========================================================= */

.text-eyebrow {
    color:
        var(--brand-green);

    font-size:
        0.62rem;

    font-weight:
        800;

    line-height:
        1.2;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


/* =========================================================
   CAPTION
   ========================================================= */

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

    font-size:
        0.6rem;

    font-weight:
        500;

    line-height:
        1.4;
}


/* =========================================================
   COMPACT UI TEXT
   ========================================================= */

.text-ui {
    font-size:
        0.68rem;

    font-weight:
        650;

    line-height:
        1.3;
}


/* =========================================================
   MONOSPACE / RAW DATA
   ========================================================= */

code,
pre,
kbd,
samp {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;
}


code {
    padding:
        2px
        4px;

    border-radius:
        4px;

    color:
        var(--text-primary);

    background:
        var(--surface-muted);

    font-size:
        0.82em;
}


/* =========================================================
   SELECTION
   ========================================================= */

::selection {
    color:
        var(--text-primary);

    background:
        var(--brand-green-soft);
}


/* =========================================================
   PLACEHOLDERS
   ========================================================= */

::placeholder {
    color:
        var(--text-muted);

    opacity:
        0.75;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {

    body {
        font-size:
            13px;
    }


    h1 {
        font-size:
            1.65rem;
    }


    h2 {
        font-size:
            1.2rem;
    }


    h3 {
        font-size:
            0.95rem;
    }

}