/* ==========================================================================
   Design tokens — global font size scale
   ==========================================================================

   Single source of truth for typography values across the application.
   Loaded on every page that renders a <head>, immediately after
   bootstrap5.min.css and before any component stylesheet.

   Values below mirror the sizes already in use, so adding this file changes
   nothing visually on its own. Component stylesheets are migrated onto these
   tokens one at a time, in a later pass.

   Usage:
       .letter-body { font-size: var(--fs-md); }

   Not covered here, deliberately:
   - Icon sizing (100px / 80px / 60px / 50px / 41px / 40px). Those are glyph
     dimensions, not text, and must not scale with body copy.
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       Type scale. Comments record the pixel equivalent at a 16px root and
       the number of declarations using that size today.
       ---------------------------------------------------------------------- */

    /* Body and UI text */
    --fs-2xs: 0.6875rem;    /* 11px  —  8 uses */
    --fs-xs: 0.75rem;       /* 12px  — 26 uses */
    --fs-sm: 0.8125rem;     /* 13px  —  9 uses */
    --fs-md: 0.875rem;      /* 14px  — 36 uses — de facto body size */
    --fs-lg: 0.9375rem;     /* 15px  — 12 uses */
    --fs-xl: 1rem;          /* 16px  — 16 uses */

    /* Emphasis and subheadings */
    --fs-2xl: 1.0625rem;    /* 17px  —  5 uses */
    --fs-3xl: 1.125rem;     /* 18px  —  8 uses */
    --fs-4xl: 1.25rem;      /* 20px  —  5 uses */

    /* Headings */
    --fs-5xl: 1.375rem;     /* 22px  —  1 use  */
    --fs-6xl: 1.5rem;       /* 24px  —  3 uses */
    --fs-7xl: 1.625rem;     /* 26px  —  1 use  */
    --fs-8xl: 1.75rem;      /* 28px  —  1 use  */
    --fs-9xl: 1.875rem;     /* 30px  —  1 use  */
    --fs-10xl: 2.25rem;     /* 36px  —  1 use  */

    /* ----------------------------------------------------------------------
       Bootstrap .fs-1 .. .fs-6 utility sizes. Values match Bootstrap 5.2.3
       exactly: .fs-1 .. .fs-4 scale with the viewport below 1200px and are
       fixed from 1200px up (see the media query below).
       ---------------------------------------------------------------------- */
    --fs-util-1: calc(1.375rem + 1.5vw);
    --fs-util-2: calc(1.325rem + 0.9vw);
    --fs-util-3: calc(1.3rem + 0.6vw);
    --fs-util-4: calc(1.275rem + 0.3vw);
    --fs-util-5: 1.25rem;   /* 20px */
    --fs-util-6: 1rem;      /* 16px */

    /* ----------------------------------------------------------------------
       Form fields on phones. iOS Safari zooms into a focused field whose
       text is under 16px, so this stays in px: a rem value would shrink
       with the 14px phone root.
       ---------------------------------------------------------------------- */
    --fs-input: 16px;
}

@media (min-width: 1200px) {
    :root {
        --fs-util-1: 2.5rem;    /* 40px */
        --fs-util-2: 2rem;      /* 32px */
        --fs-util-3: 1.75rem;   /* 28px */
        --fs-util-4: 1.5rem;    /* 24px */
    }
}


/* Bootstrap utility overrides. !important is required because Bootstrap
   declares these with !important; this file loads after bootstrap5.min.css,
   so these rules win. These classes are also used on icons, so changing a
   value here resizes those icons as well. */
.fs-1 { font-size: var(--fs-util-1) !important; }
.fs-2 { font-size: var(--fs-util-2) !important; }
.fs-3 { font-size: var(--fs-util-3) !important; }
.fs-4 { font-size: var(--fs-util-4) !important; }
.fs-5 { font-size: var(--fs-util-5) !important; }
.fs-6 { font-size: var(--fs-util-6) !important; }

/* Root font size. Every rem value in the app (these tokens, Bootstrap,
   rem-based spacing) is measured from this. Fixed in px deliberately, so the
   application sets the size rather than the visitor's browser text-size
   setting. Browser zoom still scales the page. */
html {
    font-size: var(--fs-xl);
}

/* Phones: base 16px -> 14px, so every rem value shrinks by 12.5%. */
@media (max-width: 575.98px) {
    html {
        font-size: var(--fs-md);
    }
    
    /* iOS Safari zooms the page when a focused field's text is under 16px.
       Kept in px on purpose: a rem value would shrink with the 14px root.
       The class selectors are needed to beat Bootstrap's .form-control and
       .form-select, which set font-size: 1rem. */
    input,
    select,
    textarea,
    .form-control,
    .form-select {
        font-size: var(--fs-input);
    }

    i.fa {
        font-size: var(--fs-md);
    }
}

/* Tablets, and phones held sideways: base 16px -> 15px, so every rem value
   shrinks by 6.25%. */
@media (min-width: 576px) and (max-width: 991.98px) {
    html {
        font-size: var(--fs-lg);
    }

    /* Same iOS Safari zoom fix as phones: the 15px root would make
       .form-control and .form-select 15px, and a phone held sideways
       lands in this range. */
    input,
    select,
    textarea,
    .form-control,
    .form-select {
        font-size: var(--fs-input);
    }

    i.fa {
        font-size: var(--fs-lg);
    }
}