:root {
  --font-en: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;

    --paper: #fbfaf7;
  --paper-2: #f4f2ee;
  --card: #ffffff;

    --ink: #231d18;
  --ink-2: #57504a;
  --ink-3: #746e68;
  --ink-4: #746e68;

  --line: rgba(35, 29, 24, 0.12);
  --line-2: rgba(35, 29, 24, 0.22);

    --amber: #f08e1a;
  --amber-strong: #bb5600;
  --amber-ink: #2c1302;
  --amber-soft: rgba(240, 142, 26, 0.14);

    --crit: #cd2023;
  --crit-soft: rgba(205, 32, 35, 0.12);
  --attn: #b25d00;
  --attn-soft: rgba(178, 93, 0, 0.14);
  --good: #0e854c;
  --good-soft: rgba(14, 133, 76, 0.13);

    --wa: #1c8049;
  --wa-strong: #166f3e;

  --shadow: 0 1px 2px rgba(35, 29, 24, 0.06), 0 10px 30px -12px rgba(35, 29, 24, 0.18);
  --shadow-lg: 0 2px 4px rgba(35, 29, 24, 0.06), 0 24px 60px -20px rgba(35, 29, 24, 0.35);
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--paper);
}

.btn--dark:focus-visible,
.bar__btn:focus-visible,
.foot a:focus-visible {
  outline-color: var(--paper);
  box-shadow: 0 0 0 2px var(--ink);
}

:root{--mark-red:#e5232e}