/**
 * @file
 * Defines base typography for the HFC Kingfisher theme.
 */

/* Fonts settings based on the 100E2R standard: http://www.informationarchitects.jp/en/100e2r/ */

body,
button,
caption,
fieldset,
input,
legend,
option,
select,
textarea,
td,
th {
    max-width: 100%; /* Fixes forms and tables to be responsive */
    color: var(--font-color);
    font-family: var(--main-font);
    font-size: var(--initial-font-size);
    line-height: var(--initial-line-height);
}

/* Tweaks for Roboto spacing. */

.layout-container {
    letter-spacing: var(--letter-spacing);
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading-font);
    font-weight: 500;
}

h1 {
    margin: 0.6316em 0;
    font-size: 2.375em;
    line-height: 1.2632;
}

h2 {
    margin: 0.8571em 0;
    font-size: 1.6em;
    line-height: 1.5;
}

h3 {
    margin: 1.1428em 0;
    font-size: 1.3125em;
    line-height: 1.1428;
}

h4 {
    margin: 1.5em 0;
    font-size: 1em;
    line-height: 1.5;
}

small {
    margin: 0 0 1.875em;
    font-size: 0.8em;
    line-height: 1.875;
}

label {
    font-family: var(--heading-font);
    font-size: 1.1em;
    font-weight: 500;
}

/* Embiggening Classes */
/* @todo change this section name */

.font-size-sm {
    font-size: 0.8em;
}

.font-size-md {
    font-size: 1em;
}

.font-size-lg {
    font-size: 1.3125em;
}

.font-size-xl {
    font-size: 1.75em;
}

.font-size-2x {
    font-size: 2.375em;
}

.font-size-3x {
    font-size: 3.0625em;
}

.font-size-4x {
    font-size: 4em;
}

/* Colors */

.hfc-navy-title {
    color: var(--secondary-branding-color);
    font-weight: bold;
}