@font-face {
  font-family: "Nexa";
  src: url("/fonts/NexaBold/Nexa Bold.otf") format("opentype"),
       url("./fonts/NexaBold/Nexa Bold.otf") format("opentype"),
       url("/fonts/NexaLight/Nexa Bold.otf") format("opentype"),
       url("./fonts/NexaLight/Nexa Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nexa";
  src: url("/fonts/NexaLight/Nexa Light.otf") format("opentype"),
       url("./fonts/NexaLight/Nexa Light.otf") format("opentype"),
       url("/fonts/NexaBold/Nexa Light.otf") format("opentype"),
       url("./fonts/NexaBold/Nexa Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Swiss 721";
  src: url("/fonts/swiss721bt-light/Swiss721BT-Light.otf") format("opentype"),
       url("./fonts/swiss721bt-light/Swiss721BT-Light.otf") format("opentype");
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ariom-red: #b20112;
  --ariom-red-bright: #d62828;
  --ariom-red-dark: #8f0500;
  --ariom-ink: #1a1c1c;
  --ariom-carbon: #2f3131;
  --ariom-steel: #5f5e5e;
  --ariom-silver: #e2e2e2;
  --ariom-cloud: #f9f9f9;
  --ariom-white: #ffffff;
  --ariom-heading-font: "Nexa", "Inter", Arial, sans-serif;
  --ariom-body-font: "Swiss 721", Helvetica, Arial, sans-serif;
  --ariom-radius: 8px;
  --ariom-shadow: 0 12px 30px rgba(17, 17, 17, 0.08);
}

html {
  color-scheme: light;
}

body {
  font-family: var(--ariom-body-font);
  font-weight: 300;
  background: var(--ariom-cloud);
  color: var(--ariom-ink);
}

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

h1,
h2,
h3,
h4,
h5,
h6,
.brand-heading {
  font-family: var(--ariom-heading-font);
  letter-spacing: 0;
}

.brand-mark {
  font-family: var(--ariom-heading-font);
  font-weight: 700;
  letter-spacing: 0;
}

.brand-surface {
  background: var(--ariom-white);
  border: 1px solid var(--ariom-silver);
  border-radius: var(--ariom-radius);
}

.brand-shadow {
  box-shadow: var(--ariom-shadow);
}

.brand-focus:focus {
  border-color: var(--ariom-red-bright);
  box-shadow: 0 0 0 2px rgba(214, 40, 40, 0.18);
  outline: none;
}