/* jetbrains */
@font-face {
    font-family: jetbrains;
    src: url(../assets/fonts/JetBrainsMono-Regular.woff2);
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: jetbrains;
    src: url(../assets/fonts/JetBrainsMono-Bold.woff2);
    font-weight: 700;
    font-style: normal;
}
@font-face {
  font-family: jetbrains;
  src: url(../assets/fonts/JetBrainsMono-Italic.woff2);
  font-weight: 400;
  font-style: italic;
}
@font-face {
    font-family: jetbrains;
    src: url(../assets/fonts/JetBrainsMono-BoldItalic.woff2);
    font-weight: 700;
    font-style: italic;
}

/* roboto-mono */
@font-face {
    font-family: roboto-mono;
    src: url(../assets/fonts/JetBrainsMono-Regular.woff2);
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: roboto-mono;
    src: url(../assets/fonts/Roboto_Mono/static/RobotoMono-Bold.ttf);
    font-weight: 700;
    font-style: normal;
}
@font-face {
  font-family: roboto-mono;
  src: url(../assets/fonts/Roboto_Mono/static/RobotoMono-Italic.ttf);
  font-weight: 400;
  font-style: italic;
}
@font-face {
    font-family: roboto-mono;
    src: url(../assets/fonts/Roboto_Mono/static/RobotoMono-BoldItalic.ttf);
    font-weight: 700;
    font-style: italic;
}

:root {

/* utopia.fyi */
/* ===== TYPOGRAPHY ===== */
/* ===== global ===== */
--font-family: roboto-mono, monospace;

--step--1: clamp(0.75rem, 0.7159rem + 0.1515vw, 0.8333rem);
--step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
--step-1: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
--step-2: clamp(2.5313rem, 2.4162rem + 0.5114vw, 2.8125rem);

/* ===== semantic ===== */
--font-body: var(--step-0);
--font-h1: var(--step-2);
--font-h2: var(--step-1);
--font-meta: var(--step--1);

/* ===== LINE HEIGHTS ===== */
  --lh-none:   1;     /* icons or absolute positioning */
  --lh-tight:  1.1;   /* h1 */
  --lh-snug:   1.3;   /* h2 */
  --lh-normal: 1.5;   /* body text / paragraphs */
  --lh-loose:  1.7;   /* dense, long-form reading */

/* ===== SPACING ===== */
  --space--2: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
  --space--1: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
  --space-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --space-1: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
  --space-2: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);


/* ===== BORDERS ===== */


/* ===== COLORS ===== */
  /* ===== reference ===== */
  --black: #484848;
  --black-transparent: rgba(0, 0, 0, 0.219);
  --blue: #458caa;

  --orange: #ea9360;
  --yellow: #ecc05d;

  --beige: #e7dfd2;

  /* ===== semantic ===== */
  --color-text: var(--black);
  --color-link: var(--blue);
  --color-link-hover: var(--yellow);

  --color-link-menu-contact: #ff8c8c;
  --color-link-menu-about: #a5bde7;
  --color-link-menu-dev: #b0ca96;
  --color-link-menu-art: #d3c758;

  --color-bg: var(--beige);
  --color-bg-box: var(--black-transparent);


/* ===== OVERRIDES ===== */
body.dark {
  /* ===== reference ===== */
  --white: #ffffff;
  --white-transparent: #ffffff19;;
  --blue-light: #a2c9da;
  --brown: #524a45;

  /* ===== semantic ===== */
  --color-text: var(--black);
  --color-link: var(--blue);
  --color-link-hover: var(--blue-light);
  --color-link-menu-contact: #ff8c8c;
  --color-link-menu-about: #a5bde7;
  --color-link-menu-dev: #b0ca96;
  --color-link-menu-art: #d3c758;

  --color-bg: var(--brown);
  --color-bg-box: #fff;

}}