/* ============================================================
   Seedates – Centralized Font Definitions & Sizing
   Import this once in <head> and reference via CSS variables.

   Typography:   font-family: var(--font-body);  (etc.)
   Sizing:       font-size: var(--text-body);    (etc.)
   ============================================================ */

/* ── @font-face declarations ─────────────────────────────── */
@font-face {
    font-family: 'MS-Gothic-Regular';
    src: url('/Font/MS-Gothic-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ── CSS Custom Properties ────────────────────────────────── */

:root {
    /* Typography */
    --font-body:    'MS-Gothic-Regular';
    --font-heading: 'MS-Gothic-Regular';
    --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                    'Liberation Mono', 'Courier New', monospace;
    --font-hand:    'MS-Gothic-Regular';
    --font-meta:    'MS-Gothic-Regular';
    /* Font sizing scale  (1rem = 112.5% of 16px ≈ 18px base) */
    --text-3xs:   0.556rem;   /* ~10px – micro badges */
    --text-2xs:   0.611rem;   /* ~11px – tiny hints */
    --text-xs:    0.667rem;   /* ~12px – fine print, hints */
    --text-sm:    0.722rem;   /* ~13px – secondary labels */
    --text-btn:   0.778rem;   /* ~14px – buttons, small UI */
    --text-meta:  0.833rem;   /* ~15px – meta, captions */
    --text-label: 0.889rem;   /* ~16px – form labels */
    --text-body:  1rem;       /* ~18px – body, paragraphs */
    --text-md:    1.056rem;   /* ~19px – emphasized body */
    --text-lg:    1.222rem;   /* ~22px – subtitles, leads */
    --text-xl:    1.5rem;     /* ~27px – h2 */
    --text-2xl:   2rem;       /* ~29px – h1, logo */
    --text-3xl:   2.5rem;     /* ~45px – hero titles */
}

/* ── Base html font-size ─────────────────────────────────── */

html {
    font-size: 125.5%; /* 18px base — scales all rem units */
}
/* Media devices — step down the base so rem sizes scale proportionally */
@media (max-width: 768px) {
    html {
        font-size: 100.5%; /* ~18px base — tablets & large phones */
    }
}

@media (max-width: 480px) {
    html {
        font-size: 90%; /* 16px base — phones */
    }
}
body {
    font-size: var(--text-body);
}