@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/BarlowCondensed-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/BarlowCondensed-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  src: url("assets/fonts/NotoSans-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  src: url("assets/fonts/NotoSans-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --color-ink: #272624;
  --color-ink-soft: #44423e;
  --color-orange: #ed6f0f;
  --color-orange-dark: #ca5700;
  --color-paper: #f7f4ef;
  --color-white: #ffffff;
  --color-muted: #6f6d68;
  --color-line: #dedbd5;
  --color-soft: #ede9e2;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Noto Sans", Arial, sans-serif;
  --container: 1200px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 10px 30px rgba(39, 38, 36, 0.08);
  --shadow-lg: 0 24px 60px rgba(39, 38, 36, 0.16);
  --transition: 180ms ease;
}