/* Element defaults and typography. Values come from tokens.css only. */

/* DejaVu Sans, the logo's typeface, served from the RCL so every device
   renders it (it isn't a system font). Weights beyond these two synthesise. */
@font-face {
    font-family: "DejaVu Sans";
    src: url("../fonts/DejaVuSans.ttf") format("truetype");
    font-weight: 100 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DejaVu Sans";
    src: url("../fonts/DejaVuSans-Bold.ttf") format("truetype");
    font-weight: 600 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DejaVu Sans";
    src: url("../fonts/DejaVuSans-Oblique.ttf") format("truetype");
    font-weight: 100 500;
    font-style: italic;
    font-display: swap;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    font-family: var(--hc-font-family);
    font-size: var(--hc-font-size-base);
    line-height: var(--hc-line-height);
    color: var(--hc-text);
    background-color: var(--hc-bg);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    margin: 0 0 var(--hc-space-3);
    line-height: 1.25;
    font-weight: 650;
}

h1 {
    font-size: var(--hc-font-size-2xl);
}

h2 {
    font-size: var(--hc-font-size-xl);
}

h3 {
    font-size: var(--hc-font-size-lg);
}

p {
    margin: 0 0 var(--hc-space-3);
}

a {
    color: var(--hc-accent);
    text-decoration: none;
}

a:hover {
    color: var(--hc-accent-hover);
}

label {
    font-size: var(--hc-font-size-sm);
    font-weight: 550;
}

:focus-visible {
    outline: 2px solid var(--hc-accent);
    outline-offset: 2px;
}

/* FocusOnNavigate moves keyboard/screen-reader focus to the page title after
   every navigation; without this the title wears a focus ring until the next
   click. Headings aren't interactive, so they never need a visible ring. */
h1:focus,
h1:focus-visible {
    outline: none;
}

::placeholder {
    color: var(--hc-text-muted);
    opacity: 0.7;
}