/* foxis brand tokens — shared by the public theme, the admin panel and the
   install wizard. Mirrors foxis.be/assets/css/site.css: orange #E94E1B,
   Bariol, the four-triangle fox. Load this before any page stylesheet. */

@font-face { font-family: "Bariol"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/bariol-light.woff2") format("woff2"); }
@font-face { font-family: "Bariol"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/bariol-regular.woff2") format("woff2"); }
@font-face { font-family: "Bariol"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/bariol-bold.woff2") format("woff2"); }

:root {
  --orange: #E94E1B;
  --orange-dark: #C63F13;
  --on-orange: #FFFFFF;
  --ink: #1F1D1B;
  --muted: #6B6560;
  --paper: #FFFFFF;
  --band: #FAF7F4;
  --band-hover: #F3EDE7;
  --tint: #FFF3EE;
  --line: #E6E1DB;
  --font: "Bariol", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --radius: 4px;
  --radius-lg: 8px;
  --pill: 999px;
  --shadow-panel: 0 24px 80px rgba(0, 0, 0, 0.28);
  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.18);
}

/* The fox mark: fill follows the text colour of its container. */
.fox-mark { display: inline-block; width: auto; height: 1em; fill: currentColor; vertical-align: middle; }
.fox-mark.is-custom { object-fit: contain; }

/* Mark + product name, used where the full brand is shown (install, admin login). */
.fox-lockup { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--font); font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--ink); text-decoration: none; }
.fox-lockup .fox-mark { height: 0.95em; }
.fox-lockup.is-light { color: #fff; }