/* Responsibility: Design tokens and local font declarations shared across every page. */

@font-face {
  font-family: "OPPO Sans 3";
  src: url("../fonts/oppo-sans-regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "QZ Noto Sans SC";
  src: url("../fonts/noto-sans-sc-recruit.woff") format("woff");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "OPPO Sans 3";
  src: url("../fonts/oppo-sans-medium.woff") format("woff");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "OPPO Sans 3";
  src: url("../fonts/oppo-sans-bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #f4f3ef;
  --paper: #fffefa;
  --ink: #0c0c0c;
  --muted: #77756e;
  --faint: #aaa79d;
  --line: #e3e1da;
  --accent: #21d37d;
  --accent-dark: #08613a;
  --field-bg: rgba(255, 254, 250, 0.82);
  --field-bg-active: rgba(255, 255, 252, 0.96);
  --warning: #b24528;
  --shadow: 0 20px 70px rgba(25, 23, 18, 0.09);
  --shadow-soft: 0 16px 44px rgba(25, 23, 18, 0.07);
  --ease-apple: cubic-bezier(0.22, 1, 0.36, 1);
  --radius: 8px;
  --max: 1180px;
  --qr-popover-border: #171714;
  --qr-popover-ink: #11110f;
  --qr-popover-paper: #fffef8;
  --qr-popover-accent: #ffec66;
  --qr-popover-hint: #74726a;
  --qr-popover-line: rgba(17, 17, 15, 0.14);
  --qr-popover-accent-wash: rgba(255, 236, 102, 0.24);
  --qr-popover-close-bg: rgba(255, 255, 255, 0.82);
  --qr-popover-backdrop: rgba(8, 8, 7, 0.68);
  --qr-popover-shadow: 0 18px 50px rgba(0, 0, 0, 0.24), 5px 6px 0 var(--qr-popover-ink);
  --qr-popover-shadow-mobile: 0 22px 70px rgba(0, 0, 0, 0.38), 4px 5px 0 var(--qr-popover-ink);
  --qr-popover-radius: 22px;
  --qr-popover-radius-mobile: 26px;
  --qr-popover-image-radius: 15px;
  --qr-popover-image-inner-radius: 9px;
  --qr-popover-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
}

* {
  box-sizing: border-box;
}
