:root {
    --brand-black: #000000;
    --brand-white: #ffffff;
    --brand-ink: #0a0a0a;
    --brand-gray: #777777;
    --brand-line-dark: #222222;
    --brand-line-light: #e5e5e5;
    --font-display: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --brand-tracking: 0.16em;
}

html, body, button, input, select, textarea {
    font-family: var(--font-body) !important;
}

h1, h2, h3, .home-tagline, .home-shop-button, nav a,
[class*="eyebrow"], [class*="piece-count"] {
    font-family: var(--font-display) !important;
}

nav a, .home-tagline, .home-shop-button, [class*="eyebrow"] {
    letter-spacing: var(--brand-tracking);
}

::selection {
    background: var(--brand-white);
    color: var(--brand-black);
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}