/*
 * ReMarkit design tokens (duckie_mo_mo template).
 * Prefixed --rmk-* deliberately, distinct from HPC's --hpc-* tokens.
 *
 * Navy/orange design. The wallpaper/chrome/glass/field/modal look is
 * fixed dark always — no light variant, on any page. The one thing
 * that auto-detects light/dark (see theme.js, prefers-color-scheme, no
 * manual toggle) is the solid --rmk-control-* pair used by tab
 * switches and primary buttons — see the [data-rmk-scheme="light"]
 * block near the end of this file.
 */

/*
 * font-display: optional (not swap) + all four files preloaded in
 * index.php (was only 2 of 4 before — the 600-weight files had no head
 * start at all, since the browser didn't even discover they existed
 * until it parsed this far into the CSS). "swap" guarantees a visible
 * flash: fallback text paints immediately, then unconditionally swaps
 * to the real font whenever it finishes loading, which is exactly what
 * produced "two different fonts visible" plus the width/line-wrap
 * shift that comes with swapping a generic fallback for a much
 * narrower condensed display face. "optional" gives the font a very
 * short (~100ms) window to be ready for the FIRST paint; since it's
 * preloaded, that's normally plenty of time, and if it makes the
 * window the browser commits to it with NO later swap at all — if it
 * doesn't, the fallback stays for that page view rather than jumping
 * mid-read. Combined with preload, this is what actually eliminates
 * both the flash and the reflow instead of just hiding them.
 */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: optional; src: url('../fonts/barlow-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: optional; src: url('../fonts/barlow-condensed-700.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-display: optional; src: url('../fonts/instrument-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 600; font-display: optional; src: url('../fonts/instrument-sans-600.woff2') format('woff2'); }

:root {
	--rmk-primary: #194B75;
	--rmk-primary-deep: #123A5C;
	--rmk-primary-deep2: #12395B;
	--rmk-primary-hi: #1E5988;
	--rmk-primary-contrast: #ffffff;

	--rmk-accent: #F58220;
	--rmk-accent-hover: #DE7118;
	--rmk-on-accent: #331500;

	--rmk-stripe-a: #0F3252;
	--rmk-stripe-b: #143C60;
	--rmk-error: #FF6B5E;

	--rmk-page-bg: #0e2338;
	--rmk-white: #ffffff;
	--rmk-ink: #12222f;

	/* Content-card surface: white, sitting on the page background. Same
	   in both themes — an article card reads fine on navy or on light. */
	--rmk-surface: #ffffff;
	--rmk-surface-sunken: var(--rmk-page-bg);
	--rmk-border: #dde2e8;

	--rmk-text: var(--rmk-ink);
	--rmk-text-soft: #47607a;
	--rmk-text-faint: #7c93a8;

	/* ---- Theme-flipping tokens: dark values (default) ---- */
	/* Fixed header/footer bars, and the wallpaper the animated scene falls back to. */
	--rmk-bar-bg: rgba(15, 45, 73, .94);
	--rmk-border-chrome: rgba(255, 255, 255, .16);
	--rmk-nav-text: rgba(255, 255, 255, .82);
	/* Text sitting directly on the page wallpaper (hero heading, page-hero title, footer copy). */
	--rmk-chrome-text: #ffffff;
	--rmk-chrome-text-soft: rgba(255, 255, 255, .8);
	--rmk-chrome-text-faint: rgba(255, 255, 255, .65);
	/* Translucent "glass" panels/cards floating on the wallpaper (contact form, login panel, CTA band, modal). */
	--rmk-glass-bg: rgba(255, 255, 255, .06);
	--rmk-glass-border: rgba(255, 255, 255, .16);
	--rmk-glass-text: #ffffff;
	--rmk-glass-text-soft: rgba(255, 255, 255, .72);
	--rmk-glass-item-bg: rgba(255, 255, 255, .08);
	--rmk-glass-item-border: rgba(255, 255, 255, .22);
	/* Form fields inside a glass panel. Bumped from .1/.2 — read as
	   basically invisible ("ghost outline, no fill") against the panel
	   background, confirmed via live audit on the CRM search bar. Still
	   translucent/on-brand, just enough weight to read as a real field
	   outline at a glance instead of only on close inspection. */
	--rmk-field-bg: rgba(255, 255, 255, .14);
	--rmk-field-border: rgba(255, 255, 255, .32);
	--rmk-field-text: #ffffff;
	--rmk-field-placeholder: rgba(255, 255, 255, .6);
	--rmk-field-label: rgba(255, 255, 255, .65);
	/* Modal dialog surface (the calendar popup). */
	--rmk-modal-bg: #153F63;
	--rmk-modal-border: rgba(255, 255, 255, .18);
	/* Solid control surface: the selected tab, primary submit/login button,
	   and the login page's secondary link-buttons. These must always be
	   fully opaque — never the translucent --rmk-glass-item-* tokens
	   above — so they stay legible over the busy animated wallpaper. */
	--rmk-control-bg: var(--rmk-primary);
	--rmk-control-text: var(--rmk-accent);
	/* Fixed accent orange in BOTH schemes, on purpose — every button, tab
	   slider (.seg) and active nav item gets the same orange border ring
	   as a consistent brand marker, regardless of light/dark mode. This is
	   the one control token that does NOT flip with scheme; --rmk-control-
	   bg/text still do. */
	--rmk-control-border: var(--rmk-accent);

	--rmk-radius: 10px;
	--rmk-radius-sm: 6px;
	--rmk-radius-pill: 999px;

	--rmk-shadow-color: #0f172a;
	--rmk-shadow-resting:
		0 1px 2px color-mix(in srgb, var(--rmk-shadow-color) 6%, transparent),
		0 1px 1px color-mix(in srgb, var(--rmk-shadow-color) 4%, transparent);
	--rmk-shadow-lifted:
		0 20px 30px -14px color-mix(in srgb, var(--rmk-shadow-color) 35%, transparent),
		0 8px 12px -6px color-mix(in srgb, var(--rmk-shadow-color) 14%, transparent);
	--rmk-glow-shadow:
		0 0 0 1px color-mix(in srgb, var(--rmk-accent) 40%, transparent),
		0 8px 20px -6px color-mix(in srgb, var(--rmk-accent) 45%, transparent);
}

/* ---- Auto light/dark: control color only ----
   Per standing decision, the wallpaper/chrome/glass/field/modal design
   stays the fixed dark navy look always, on every page, regardless of
   system preference — there is no light variant of the background.
   The ONE thing that follows the visitor's OS setting is solid control
   surfaces (selected tab, submit/login button, login's link-buttons):
   white+navy in light mode, navy+orange in dark mode. theme.js sets
   data-rmk-scheme from prefers-color-scheme automatically (no manual
   toggle) — deliberately a separate attribute from Bootstrap's own
   data-bs-theme, which stays pinned to "light" always so Bootstrap's
   built-in dark-mode component styles (alerts, selects, etc.) never
   leak into components this template hasn't explicitly themed yet. */
[data-rmk-scheme="light"] {
	--rmk-control-bg: #ffffff;
	--rmk-control-text: var(--rmk-primary);
	/* --rmk-control-border deliberately NOT overridden here — it stays
	   --rmk-accent (set above) in both schemes. */
}