@font-face { font-family: "Michroma"; src: url("../fonts/michroma-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #070707;
  --card: #0e0e0f;
  --raised: #131314;
  --inset: #0a0a0b;
  --line: rgba(200, 200, 205, 0.10);
  --line-2: rgba(200, 200, 205, 0.18);
  --text: #ececee;
  --text-strong: #f4f4f6;
  --silver: #9a9a9e;
  --silver-2: #8f8d8c;
  --muted: #7c7b7f;
  --faint: #6a696d;
  --silver-light: #d8d8dc;
  --red: #bd1f22;
  --red-deep: #941417;
  --red-light: #e8474a;
  --red-glow: rgba(189, 31, 34, 0.55);
  --warn: rgba(224, 165, 82, 0.5);
  --radius-card: 14px;
  --radius-control: 12px;
  --tap: 44px;
  --font-display: "Michroma", "Arial Black", sans-serif;
  --font-body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}