/* ==========================================================================
   Simplex — Design tokens and fonts. Brand colours, type and spacing live in :root,
   so the rebrand is mostly a matter of changing the values here.
   ========================================================================== */

/* ---------- Fonts (self-hosted, no third-party requests) ---------- */
@font-face {
  font-family: "Maven Pro";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/maven-pro-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Maven Pro";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/maven-pro-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Design tokens ---------- */
:root {
  /* Brand */
  --sx-red: #ed1c24; /* decorative accents: rules, dashes, icons */
  --sx-red-ink: #c8161d; /* text & buttons on light backgrounds (AA contrast) */
  --sx-red-dark: #a3121a; /* hover / pressed */
  /* Neutrals */
  --sx-ink: #1f2328;
  --sx-muted: #5b6168;
  --sx-surface: #f5f5f4;
  --sx-border: #e4e4e2;
  --sx-white: #ffffff;
  /* Dark sections */
  --sx-dark: #1f1d1c;
  --sx-dark-2: #2a2827;
  --sx-dark-text: #d6d3d1;
  --sx-dark-muted: #a8a29e;
  --sx-dark-line: rgba(255, 255, 255, 0.12);
  /* Type & shape */
  --sx-font: "Maven Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sx-radius: 0.75rem;
  --sx-radius-sm: 0.5rem;
  --sx-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.08);
  --sx-section-y: clamp(4rem, 8vw, 7rem);
  --sx-header-h: 76px;
  /* Bootstrap overrides */
  --bs-body-font-family: var(--sx-font);
  --bs-body-color: var(--sx-ink);
  --bs-body-bg: var(--sx-white);
  --bs-link-color-rgb: 200, 22, 29;
  --bs-link-hover-color-rgb: 163, 18, 26;
  --bs-border-color: var(--sx-border);
  --bs-border-radius: var(--sx-radius-sm);
  --bs-focus-ring-color: rgba(237, 28, 36, 0.3);
  /* replace Bootstrap's grey "secondary" (#6c757d) with brand neutrals */
  --bs-secondary: var(--sx-muted);
  --bs-secondary-rgb: 91, 97, 104;
  --bs-secondary-color: var(--sx-muted);
  --bs-secondary-color-rgb: 91, 97, 104;
  --bs-secondary-text-emphasis: var(--sx-ink);
  --bs-secondary-bg: var(--sx-surface);
  --bs-secondary-bg-rgb: 245, 245, 244;
  --bs-secondary-bg-subtle: var(--sx-surface);
  --bs-secondary-border-subtle: var(--sx-border);
}