/* ============================================================
   Typography
   Heading font : "Helvetica Neue", Helvetica, Arial, sans-serif
   Body font    : "Open Sans", "PT Serif Caption", sans-serif
   ============================================================ */

:root {
    /* Font stacks */
    --font-heading: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-primary: "Open Sans", "PT Serif Caption", sans-serif;

    /* Size scale */
    --text-xs:   10px;
    --text-sm:   11px;
    --text-md:   12px;   /* application body text */
    --text-lg:   18px;
    --text-xl:   24px;   /* subheading */
    --text-2xl:  32px;   /* h1 */

    /* Color palette */
    --color-heading:    #007cba;
    --color-text:       #000000;
    --color-text-muted: #6b7280;
}

/* ── Base ──────────────────────────────────────────── */
html {
    font-size: 12px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-primary);
    font-size: 12px;
    color: #000000;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ── Headings ──────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-heading);
    margin-top: 0;
}

h1 { font-size: 32px; color: #007cba; }
h2 { font-size: 24px; color: #007cba; }
h3 { font-size: 18px; }
h4 { font-size: 16px; font-weight: 500; }
h5 { font-size: 14px; font-weight: 500; }
h6 { font-size: 12px; font-weight: 500; }

/* ── Form elements ─────────────────────────────────── */
input, button, select, textarea {
    font-family: var(--font-primary);
    font-size: 12px;
}

/* ── Paragraphs ────────────────────────────────────── */
p {
    font-family: var(--font-primary);
    font-size: 12px;
    color: #000000;
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 0.75rem;
}

/* ── Utility classes ───────────────────────────────── */
.text-xs    { font-size: 10px; }
.text-sm    { font-size: 11px; }
.text-md    { font-size: 12px; }
.text-lg    { font-size: 18px; }
.text-muted { color: var(--color-text-muted); }
.text-heading { font-family: var(--font-heading); color: var(--color-heading); }