/* =====================================================================
   Fais theme — overrides Valco's design tokens for the reseller copy.
   Matched to fais.fi: Montserrat (display) + Roboto (body), navy
   #344B77 primary / #162B46 deep, clean cool-white surfaces, rounded
   corners + pill buttons.
   Linked AFTER tokens.css + app.css so these win.
   ===================================================================== */
:root {
  /* Body / UI text = Roboto; headings & chrome get Montserrat (below) */
  --font-sans:   "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Fais navy as the primary UI colour (nav, buttons, segmented, sliders, headings) */
  --valco-ink:   #344B77;
  --valco-black: #162B46;

  /* Clean, slightly cool surfaces so white panels/stage read crisp */
  --bg-page:     #f5f7fa;
  --valco-paper: #eef2f7;

  /* Fais brand accent (the navy itself; no secondary brand colour) */
  --fais-navy:   #344B77;

  /* Rounded, friendly corners */
  --radius-md:   8px;
  --radius-lg:   14px;
}

/* ---- Typography: Montserrat for display / chrome, Roboto for prose ---- */
.hero-title,
h1, .h1, h2, .h2, h3, .h3,
.eyebrow, .hero-eyebrow,
.announce,
.btn, .seg, .lang-btn {
  font-family: var(--font-display);
}
.hero-title { font-weight: 700; letter-spacing: -0.015em; }
h1, .h1, h2, .h2, h3, .h3 { font-weight: 700; }
.eyebrow, .hero-eyebrow { font-weight: 600; }

/* ---- Header logo (horizontal Fais mark + wordmark) ---- */
.nav-logo img { height: 34px; width: auto; display: block; }

/* ---- Pill buttons & primary CTA, à la fais.fi ---- */
.btn { border-radius: 999px; font-weight: 600; }
.btn-primary:hover:not(:disabled) { background: var(--valco-black); box-shadow: var(--shadow-2); }
.btn-secondary:hover:not(:disabled) { background: var(--valco-ink); color: #fff; }

/* Sliders / checkboxes pick up the navy */
.slider input[type="range"], .check input { accent-color: var(--valco-ink); }

/* ---- Footer: Fais + Valco logos side by side on the dark navy bar ---- */
.footer { background: var(--valco-black); }
.footer-logos { display: flex; align-items: center; justify-content: center; gap: 30px; margin-bottom: 16px; flex-wrap: wrap; }
.footer-mark { height: 40px; margin-bottom: 0; }
.footer-mark-fais { height: 30px; }