/*
 * theme.css - DRIVORA look. Colours come from the Drivora logo.
 * base.css (shared) does the layout; this file only sets colours and fonts.
 */

/*
 * Display font: Saira (SIL Open Font Licence, self-hosted - no Google requests).
 * A free stand-in close to Supermolot, the logo's tagline font.
 * To switch to TT Supermolot Neue once a web licence is bought: add its @font-face
 * here and change --font-display. Nothing else needs touching.
 */
@font-face {
  font-family: "Saira";
  src: url("../fonts/saira-variable.woff2") format("woff2");
  font-weight: 100 900;      /* variable font: any weight in this range */
  font-stretch: 50% 125%;    /* and any width */
  font-display: swap;        /* show text straight away, swap when loaded */
}

:root {
  --font-display: "Saira", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Two-tier header: slate top bar (the logo is designed on this slate), deeper slate menu bar */
  --top-bg: #303841;
  --top-text: #ffffff;
  --top-muted: #b5bec7;
  --nav-bg: #262d35;
  --nav-text: #eef1f3;
  --tick-mark: #303841;

  --dark: #303841;           /* logo background slate */
  --dark-2: #262d35;         /* deeper slate for the call-to-action band */
  --accent: #cbb26a;         /* logo wordmark gold */
  --accent-hover: #ddc684;
  --accent-pale: #f3e999;    /* highlight from the logo figure */
  --accent-soft: rgba(203, 178, 106, .35);
  --btn-text: #1d2228;
  --link: #7a5a22;           /* darker gold for links on white (passes contrast checks) */
  --tint: #f6f4ef;           /* soft warm background */
  --line: #e4dfd3;
  --text: #1f252c;
  --muted: #5b6570;
  --on-dark: #d6dbe0;
  --dim-on-dark: #a3adb7;
  --border-on-dark: #424b55;
}

/* Logo with strapline: a little taller than the shared default so the strapline stays readable */
.brand img.dv-logo { height: 78px; }
.footer-brand img.dv-logo { height: 84px; }
/* the footer already shows the strapline in the logo, so hide the repeated tagline line */
.footer-brand .muted-light { display: none; }
@media (max-width: 900px) { .brand img.dv-logo { height: 46px; } }