/* ==============================================
   Savvy Typography System
   ==============================================
   Base: html 62.5% -> 1rem = 10px
   All sizes in rem for easy math (e.g. 1.6rem = 16px)
   Scale via CSS custom properties at 3 breakpoints:
     - Mobile (base)
     - Desktop (min-width: 1123px)
     - Large  (min-width: 1700px)
   ============================================== */

/* ----- Root variables ----- */

:root {
    /* Font size scale */
    --fs-3xs:  0.7rem;    /*  7px  - tiny labels, badges         */
    --fs-2xs:  0.8rem;    /*  8px  - fine print, footer meta     */
    --fs-xs: 1.1rem;    /*  9px  - captions, dot separators    */
    --fs-sm:   1.2rem;    /* 14px  - breadcrumbs, secondary UI   */
    --fs-base: 1.4rem;    /* 16px  - small body, sidebar, nav    */
    --fs-body: 1.6rem;    /* 18px  - main body / paragraph text  */
    --fs-md: 1.6rem;    /* 20px  - subtitles (mobile)          */
    --fs-lg:   1.8rem;    /* 22px  - lead / emphasized text      */
    --fs-xl:   2.4rem;    /* 24px  - large subtitle              */
    --fs-2xl:  2.8rem;    /* 28px  - display / about name        */

    /* Heading scale (mobile) - calibrated to match current computed px */
    --fs-h6:   1.2rem;    /* 12px  */
    --fs-h5:   1.3rem;    /* 13px  - matches current h5 ~13px    */
    --fs-h4:   1.68rem;   /* 16.8px - matches current h4 ~16.8px */
    --fs-h3:   1.84rem;   /* 18.4px - matches current h3 ~18.4px */
    --fs-h2:   2.46rem;   /* 24.6px - matches current h2 ~24.6px */
    --fs-h1:   2.6rem;    /* 26px  - matches current h1 ~26px    */
    --fs-h1-single: 2.41rem;
    --fs-h2-single: 2.06rem;
    --fs-h3-single: 1.84rem;
    --fs-h4-single: 1.68rem;
    --fs-subtitle: 1.5rem;
    --fs-hero: 3.5rem;    /* 35px  - hero / display headings     */
    --fs-subscribe-title: 1.84rem;
    /* Button / input */
    --fs-btn:  1.3rem;    /* 13px  - matches current button 13px */
    --fs-input: 1.5rem;   /* 15px  - form inputs                 */

    /* Line heights */
    --lh-tight:   1.2;
    --lh-snug:    1.3;
    --lh-normal:  1.6;
    --lh-relaxed: 1.72;
}

/* ----- Base ----- */

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-size: 62.5%;
}

body {
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
}

/* ----- Headings ----- */

h1 {
    font-size: var(--fs-h1);
}

h2 {
    font-size: var(--fs-h2);
}

h3 {
    font-size: var(--fs-h3);
}

h4 {
    font-size: var(--fs-h4);
}

h5 {
    font-size: var(--fs-h5);
}

h6 {
    font-size: var(--fs-h6);
}

/* ----- Body elements ----- */

small,
.text_small {
    font-size: var(--fs-2xs);
}

table {
    font-size: var(--fs-body);
}

blockquote {
    font-size: var(--fs-lg);
}

/* ----- Buttons & Inputs ----- */

.button,
input[type="submit"] {
    font-size: var(--fs-btn);
    line-height: 1;
}

::placeholder {
    font-size: var(--fs-input);
}


/* ----- Template-single heading overrides (mobile) ----- */

.template-single h1,
.template-single-snippet h1 {
    font-size: var(--fs-h1-single);
}

.template-single h2,
.template-single-snippet h2 {
    font-size: var(--fs-h2-single);
}

.template-single h3,
.template-single-snippet h3,
.template-about h3 {
    font-size: var(--fs-h3-single);
    font-weight: 800;
}

.template-single .content h4, .template-single-snippet .content h4 {
    font-size: var(--fs-h4-single);
}

/* ==============================================
   Desktop (min-width: 1123px)
   ============================================== */

@media (min-width: 1123px) {
    :root {
        /* Heading scale - matches current computed px at 84.9% base */
        --fs-h1: 4.8rem;    /* ~46px    */
        --fs-h2: 3.48rem;   /* ~32.8px  */
        --fs-h3:   2.44rem;   /* ~24.4px  */
        --fs-h4: 1.82rem;
        --fs-h1-single: 3.51rem;
        --fs-h2-single: 3.01rem;
        --fs-h3-single: 2.38rem;
        --fs-h4-single: 1.9rem;
        --fs-subtitle: 2rem;
        --fs-h5:   1.49rem;   /* ~14.9px  */
        --fs-body: 1.8rem;
        --fs-sm: 1.3rem;
        --fs-xs: 1.1rem;
        --fs-lg: 2.2rem;
                /* 22px  - lead / emphasized text      */
        --fs-2xl:  3.4rem;    /* 34px     */

        /* Subtitle scales up */
        --fs-md:   2rem;      /* 20px     */

        /* Button scales up */
        --fs-btn:  1.4rem;    /* 14px     */

        /* Placeholder */
        --fs-input: 1.5rem;   /* 16px     */
        --fs-base: 1.58rem;
    }

  
    
}

/* ==============================================
   Large screens (min-width: 1700px)
   ============================================== */

@media (min-width: 1700px) {
    :root {
        --fs-body: 1.9rem;    /* 19px     */
        --fs-h1: 5.19rem;   /* ~51.3px  */
        --fs-h1-single:  3.91rem;
        --fs-h2-single: 3.31rem;
        --fs-h3-single: 2.74rem;
        --fs-h4-single: 2.23rem;
        --fs-subtitle: 2.2rem;
        --fs-subscribe-title: 2.44rem;
        --fs-h2: 4.09rem;   /* ~38.9px  */
        --fs-h3:   2.72rem;   /* ~24.2px  */
        --fs-h4:   2.44rem;   /* 1.84 * 14.88 = 27.4px  */
        --fs-h5:   2.23rem;   /* 1.5 * 14.88 = 22.3px   */
        --fs-2xl:  3.8rem;    /* 38px     */

        /* Subtitle scales up */
        --fs-md: 2.1rem;    /* 22px     */
        --fs-xs: 1.2rem;
        /* Button scales up */
        --fs-btn:  1.6rem;    /* 16px     */

        /* Placeholder */
        --fs-input: 1.6rem;   /* 17px     */
    }

   
}