/*  ---------------------------------------------------------
    la_fonts.css
--------------------------------------------------------- */
:root {

    /* Site font-styles. */
    --ff-main: 'Studio-Feixen-Sans';
    --ff-serif: 'Times New Roman', Times, serif;
    --ff-sans-serif: 'IBMPlexSans', Helvetica, Arial, sans-serif;    
    --ff-primary-heading: var(--ff-sans-serif);
    --ff-secondary-heading: var(--ff-main);
    --ff-fancy: 'Liberation-Serif';
    --ff-post-snippet: "IBMPlexSansMono", monospace;

    /* Site font-sizes. */
    --fsz-100: var(--sz-400);
    --fsz-200: var(--sz-500);
    --fsz-225: var(--sz-525);
    --fsz-300: var(--sz-600);
    --fsz-400: var(--sz-700);

    /* Site font size clamps from 320px - 980px. */
    --fsz-clamp-320-980-14x16:     clamp(.875rem, calc(.303vw + 0.814rem), 1.0rem);
    --fsz-clamp-320-980-16x18:     clamp(1.0rem, calc(.303vw + 0.939rem), 1.125rem);
    --fsz-clamp-320-980-16x18-8:   clamp(1.0rem, calc(.424vw + 0.915rem), 1.175rem);
    --fsz-clamp-320-980-16x20:     clamp(1.0rem, calc(.606vw + 0.879rem), 1.25rem);
    --fsz-clamp-320-980-16x24:     clamp(1.0rem, calc(1.212vw + 0.758rem), 1.5rem);
    --fsz-clamp-320-980-18x24:     clamp(1.125rem, calc(.909vw + 0.943rem), 1.5rem);
    --fsz-clamp-320-980-20x32:     clamp(1.25rem, calc(1.818vw + 0.886rem), 2.0rem);
    --fsz-clamp-320-980-24x42:     clamp(1.5rem, calc(2.727vw + 0.955rem), 2.625rem);
    --fsz-clamp-320-980-32x48:     clamp(2.0rem, calc(2.424vw + 1.515rem), 3.0rem);

    /* Site font-weights. */
    --fw-xlight: 300;
    --fw-light: 400;
    --fw-bold: 600;
    --fw-xbold: 900;

    /* Site font colors. */
    --fc-xlight: var(--clr-xlt-light);
    --fc-medlight: var(--clr-med-light);
    --fc-midlight: var(--clr-xlt-dark);
    --fc-light: var(--clr-lt-dark);
    --fc-med: var(--clr-med-dark);
    --fc-dark: var(--clr-dk-dark);   /* placeholder for future growth */
    --fc-xdark: var(--clr-xdk-dark);
    --fc-med-green: var(--clr-med-green);
    --fc-med-red: var(--clr-xdk-red);

    /* Site font link & hover colors. */
    --fc-link: var(--clr-med-blue);
    --fc-link-hover: var(--clr-lt-blue);

    /* Site tag colors. */
    --fc-tag-hover-border-accent: var(--clr-lt-blue);

    /* Site line-height monikers. */
    --flh-xtight: var(--lh-100);
    --flh-tight: var(--lh-200);
    --flh-med: var(--lh-300);

}

/* Studio-Feixen-Sans: Regular */
@font-face {
    font-family: "Studio-Feixen-Sans";
    src: url("/assets/sfs.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    font-synthesis: none;  
}

/* Studio-Feixen-Sans: Bold */
@font-face {
    font-family: "Studio-Feixen-Sans";
    src: url("/assets/sfsb.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    font-synthesis: none;    
}

/* Liberation Serif: Regular */
@font-face {
    font-family: "Liberation-Serif";
    src: url("/assets/ls.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    font-synthesis: none;
}

/* Liberation Serif: Bold */
@font-face {
  font-family: "Liberation-Serif";
  src: url("/assets/lsb.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  font-synthesis: none;  
}

/* IBM Plex Sans: Regular */
@font-face{
  font-family: "IBMPlexSans";
  src: url("/assets/ibmps.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* IBM Plex Sans: Semi Bold */
@font-face{
  font-family: "IBMPlexSans";
  src: url("/assets/ibmpssb.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* IBM Plex Sans: Bold */
@font-face{
  font-family: "IBMPlexSans";
  src: url("/assets/ibmpsb.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: "IBMPlexSansMono";
    src: url("/assets/ibmpm.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Site Font (non-link) Component Classes. */
.site-font-std {
    font-family: var(--knob-ff-std, var(--ff-main));
    font-size: var(--knob-fs-std, var(--fsz-clamp-320-980-16x18));
    font-weight: var(--knob-fw-std, var(--fw-xlight));
    line-height: var(--knob-flh-std, var(--flh-tight));
    color: var(--knob-fc-std, var(--fc-light));
    text-decoration: none;
}

.site-font-primary-heading {
    font-family: var(--ff-primary-heading);
    font-size: var(--knob-fs-primary-heading, var(--fsz-clamp-320-980-16x24));
    font-weight: var(--fw-light);
    line-height: var(--knob-flh-primary-heading, var(--flh-xtight));
    color: var(--fc-xlight);
}

.site-font-secondary-heading {
    font-family: var(--ff-main);
    font-size: var(--knob-fs-secondary-heading, var(--fsz-clamp-320-980-16x20));
    font-weight: var(--knob-fw-secondary-heading, var(--fw-xlight));
    line-height: var(--knob-flh-secondary-heading, var(--flh-tight));
    color: var(--fc-med-green);   
}

.site-font-brand {    
    font-family: var(--knob-ff-brand, var(--ff-fancy));
    font-size: var(--knob-fs-brand, var(--fsz-clamp-320-980-18x24));
    font-weight: var(--knob-fw-brand, var(--fw-bold));
    line-height: var(--knob-flh-brand, var(--flh-tight));
    color: var(--fc-med-green);
}

.site-font-date-std {
    font-family: var(--knob-ff-date, var(--ff-main));
    font-size: var(--knob-fs-date, var(--fsz-clamp-320-980-16x18));
    font-weight: var(--fw-xlight);
    line-height: var(--knob-flh-date, var(--flh-tight));
    color: var(--knob-fc-date, var(--fc-midlight));
}

.site-font-form-std {
    font-family: var(--knob-ff-form, var(--ff-sans-serif));
    font-size: var(--knob-fs-form, var(--fsz-clamp-320-980-16x18));
    font-weight: var(--knob-fw-form, var(--fw-xlight));
    line-height: var(--knob-flh-form, var(--flh-tight));
    color: var(--knob-fc-form, --fc-light);    
}

.site-font-form-error {
    font-family: var(--ff-sans-serif);
    font-size: var(--knob-fs-form-error, var(--fsz-clamp-320-980-16x18));
    font-weight: var(--fw-xlight);
    line-height: var(--flh-xtight);    
    color: var(--fc-med-red);
    text-align: center;
}

/* Site Font (link) Component Classes */
.site-font-link-std {
    font-family: var(--knob-ff-link, var(--ff-main));
    font-size: var(--knob-fs-link, var(--fsz-clamp-320-980-16x18));
    font-weight: var(--fw-xlight);
    line-height: var(--knob-flh-link, var(--flh-tight));    
    color: var(--knob-fc-link, var(--fc-link));
    text-decoration: none;
    text-decoration-thickness: .08em;
    text-underline-offset: .15em;
    transition: 
        color var(--transition-fast),
        background-color var(--transition-fast),
        text-decoration-color var(--transition-fast),
        outline-color var(--transition-fast);
}

/* :any-link pseudo class covers :link & :visited */
.site-font-link-std:any-link { color: var(--knob-fc-link, var(--fc-link)); }

.site-font-link-std:hover,
.site-font-link-std:focus {
    color: var(--knob-fc-link-hover, var(--fc-link-hover));
    background-color: var(--knob-bg-link-hover, transparent);
    text-decoration: var(--knob-link-hover-decoration, underline);
    transition-duration: var(--transition-fast);
    cursor: pointer;
}

.site-font-link-std:focus-visible {
    outline: 2px solid var(--fc-link-hover);
    outline-offset: 2px;
}

/* Site font utility classes */
.site-ff-fancy { font-family: var(--ff-fancy); }

.site-fs-xsmall { font-size: var(--fsz-100); }
.site-fs-small { font-size: var(--fsz-200); }
.site-fs-med { font-size: var(--fsz-300); }
.site-fs-large { font-size: var(--fsz-400); }

.site-fc-xlight { color: var(--fc-xlight); }
.site-fc-midlight { color: var(--fc-midlight); }
.site-fc-light { color: var(--fc-light); }
.site-fc-med { color: var(--fc-med); }
.site-fc-dark { color: var(--fc-dark); }
.site-fc-xdark { color: var(--fc-xdark); }
.site-fc-med-green { color: var(--fc-med-green); }
.site-fc-med-red { color: var(--fc-med-red); }

.site-fw-xlight { font-weight: var(--fw-xlight); }
.site-fw-light { font-weight: var(--fw-light); }
.site-fw-bold { font-weight: var(--fw-bold); }
.site-fw-xbold { font-weight: var(--fw-xbold); }

.site-flh-xtight { line-height: var(--flh-xtight); }
.site-flh-tight { line-height: var(--flh-tight); }
.site-flh-med { line-height: var(--flh-med); }


/* ---------------------------------------------------------
   Site font link utility classes.
   Uses knob custom variables to dial property values.
--------------------------------------------------------- */
.site-link-ff-sans-serif { --knob-ff-link: var(--ff-sans-serif); }
.site-link-fs-xsmall { --knob-fs-link: var(--fsz-100); }
.site-link-fc-med { --knob-fc-link: var(--fc-med); }
.site-link-fc-muted { --knob-fc-link: var(--fc-light); }
.site-link-fc-accent { --knob-fc-link: var(--fc-med-green); }
.site-link-fc-dark { --knob-fc-link: var(--fc-dark); }
.site-link-fc-xdark { --knob-fc-link: var(--fc-xdark); }
.site-link-flh-med { --knob-flh-link: var(--flh-med); }
.site-link-hover-fc-xlight { --knob-fc-link-hover: var(--fc-xlight); }