/*
 * Vimo Swim brand skin for the django-unfold admin.
 * Layered on top of Unfold's own stylesheet via UNFOLD["STYLES"], so it only
 * carries the type system — Unfold's COLORS setting already supplies the warm
 * cream base and coral primary.
 *
 * Oswald for display headings (uppercase), Inter for body and UI. Comfortaa
 * was retired in Aug 2026 and now lives only in the logo.
 */

@font-face {
  font-family: "Oswald";
  src: url("../fonts/oswald/Oswald-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("../fonts/oswald/Oswald-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --vimo-navy: #001f3f;
  --vimo-coral: #e94d3d;
  --vimo-font-display: "Oswald", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vimo-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body,
.font-sans {
  font-family: var(--vimo-font-body);
}

/* Display headings — the page title, changelist/changeform headers and the
   KPI card titles Unfold renders through its title component. h3+ stay
   sentence case so dense admin tables keep their scanability. */
/* Unfold renders the page title in #header-inner, outside #content, so it
   needs its own selector — #content h1 alone never matches it. */
#header-inner h1,
#content h1,
#content h2,
.unfold-title,
h1.font-semibold,
h2.font-semibold {
  font-family: var(--vimo-font-display);
  color: var(--vimo-navy);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

#content h3,
#content h4 {
  font-family: var(--vimo-font-display);
  color: var(--vimo-navy);
}

/* Sidebar and top-bar branding speak the same display voice as headings */
#nav-sidebar .font-semibold,
header .font-semibold {
  font-family: var(--vimo-font-display);
}

/* Engineered numerals — KPI readouts on the lead and deposit changelists
   share the display face and line up in columns. */
/* Unfold puts the size and the color class on the SAME element, so this has
   to be a compound selector — a descendant one never matches. */
.display-number,
.text-2xl[class*="text-font-important"],
.text-3xl[class*="text-font-important"] {
  font-family: var(--vimo-font-display);
  font-variant-numeric: tabular-nums;
}