/* ════════════════════════════════════════════════════════════════════
   TRANSTALLY-STYLE LIGHT FINISH  ·  loaded LAST in _head.html
   ════════════════════════════════════════════════════════════════════
   Inspired by transtally.co.ke: a clean, bright, near-monochrome slate UI
   with a geometric sans-serif type system, hairline-bordered white cards,
   12px-radius action buttons and generous whitespace — while keeping the
   ICMS honey/gold as the brand accent.

   This layer only carries the *positive* polish. The heavy lifting (fonts,
   surfaces, ink→slate, radii, shadows) is done by the retuned design tokens
   in css/icms-modern.css :root. The old dark theme was removed 2026-07-24;
   this file replaces css/dark.css as the final override layer.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Type — clean sans everywhere, serif fully retired ──────────────
   Belt-and-braces: any element whose font slipped through resolves to the
   sans token. Headings use the display sans (Space Grotesk); body copy uses
   Plus Jakarta Sans. Mono (JetBrains) is left untouched for code/figures. */
body,
input, textarea, select, button {
	/* !important defeats responsive.css `body{font-family:var(--font)!important}`
	   (which forces a bare system stack) and tweaks.css. */
	font-family: var(--font-body) !important;
}
h1, h2, h3, h4, h5, h6 {
	/* !important defeats leftover inline `style="font-family:'Playfair…'"`
	   on a few landing headings. */
	font-family: var(--font-display) !important;
	letter-spacing: -0.02em;
}

/* ── 2. Marketing top nav — clean white sticky bar with a hairline rule ── */
.icms-mnav {
	background: rgba(255, 255, 255, 0.85) !important;
	border-bottom: 1px solid var(--ink-200) !important;
}
.icms-mnav-brand-mark {
	/* solid slate chip with the gold monogram — no navy gradient */
	background: var(--ink-900) !important;
	color: var(--gold-400) !important;
}

/* ── 3. Action buttons — 12px radius, weight 600 (badges/pills unchanged) ─ */
.icms-btn-primary,
.icms-btn-secondary,
.icms-btn-ghost,
.icms-mnav-cta,
.btn,
.btn-primary,
.btn-gold,
.btn-ghost,
.mbtn {
	border-radius: var(--radius);
	font-weight: 600;
}
/* Secondary / ghost read as white with a slate hairline, like TransTally */
.icms-btn-secondary,
.btn-ghost,
.icms-btn-ghost {
	background: var(--surface-card);
	border: 1px solid var(--ink-200);
	color: var(--ink-800);
}
.icms-btn-secondary:hover,
.btn-ghost:hover,
.icms-btn-ghost:hover {
	border-color: var(--ink-400);
	background: var(--ink-50);
}

/* ── 4. Cards & panels — hairline slate border, white fill, soft shadow ── */
.icms-deliv-card,
.icms-doc-card,
.icms-feature-card,
.icms-how-card,
.icms-pricecard,
.icms-hero-pricecard,
.icms-trust-card,
.wm-card,
.card {
	border: 1px solid var(--ink-200);
	background: var(--surface-card);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

/* ── 5. Landing — drop the heavy paper-grain texture for a bright surface ─ */
#welcomeModal::before {
	display: none !important;
}
#welcomeModal,
body.icms-marketing {
	background: var(--surface) !important;
}

/* ── 6. App shell stays light on clean surfaces (dark.css is gone) ───────
   `.icms-themed-app` used to be the second selector here. That class existed
   only to opt the shell into the removed css/dark.css, but this rule was the
   one thing still giving SIGNED-OUT visitors their page background on
   /exam/, /notes/ and /referral/ (guests carry `ics-pre-login`, not
   `ics-logged-in`). Targeting `ics-pre-login` directly keeps that working
   and let the dead class be dropped from partials/_body-open.html. */
body.ics-logged-in,
body.ics-pre-login {
	background: var(--surface);
	color: var(--ink-800);
}

/* ── 7. Eyebrow / section kickers — crisp uppercase tracking on white ──── */
.icms-eyebrow {
	background: var(--gold-50);
	border-color: var(--gold-200);
	color: var(--gold-700);
}

/* ════════════════════════════════════════════════════════════════════
   8. ICON SYSTEM  ·  added 2026-07-25
   ════════════════════════════════════════════════════════════════════
   ~500 Font Awesome glyphs across the app had no shared size, colour or
   alignment discipline: css/topbar.css alone mixed 11/12/13/16px, and
   icon colours ranged across six gold tokens plus five raw hexes. This
   section is the single place that decides how an icon looks.

   Deliberately THREE tiers rather than one sweeping override, because
   !important declarations are resolved by specificity *among themselves*:
   a flat `.ico-accent{color:…!important}` (0,1,0) cannot beat an existing
   `.icms-app-panel .field label i{color:…!important}` (0,2,1) merely by
   loading later. So:

     Tier A  unopinionated base, NO !important. Loses to every existing
             rule by design — it only catches the unstyled majority, and
             fixes the single most common defect (baseline drift).
     Tier B  opt-in utilities WITH !important, for markup migrated to them.
     Tier C  fixes the CONTAINER, not the icon. This is what actually makes
             icon+label pairs line up; once a container is inline-flex with
             a gap, the icon inside needs no per-component font-size at all.

   Rules of the road:
     • Size: five steps for chrome; plain 1em for icons inline in prose.
     • Colour: exactly two defaults — gold-600 for actionable/branded,
       ink-400 for decorative/meta. Semantic colours for status only.
     • Alignment: never vertical-align on the icon; flex + gap on the parent.
     • Every decorative icon takes aria-hidden="true".
   ════════════════════════════════════════════════════════════════════ */

/* ── Tier A — base. No !important: this must lose to anything explicit. ── */
.fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands {
	font-size: 1em;
	line-height: 1;
	vertical-align: -0.075em;   /* optical baseline next to text */
}

/* ── Tier B — opt-in utilities ─────────────────────────────────────── */
.ico-xs { font-size: 10px !important; }
.ico-sm { font-size: 12px !important; }
.ico-md { font-size: 14px !important; }
.ico-lg { font-size: 18px !important; }
.ico-xl { font-size: 24px !important; }

.ico-accent { color: var(--gold-600, #b07d1f) !important; }  /* actionable / branded */
.ico-muted  { color: var(--ink-400,  #94a3b8) !important; }  /* decorative / meta    */
.ico-ok     { color: var(--success-500, #10b981) !important; }
.ico-warn   { color: #ea580c !important; }
.ico-bad    { color: var(--danger-500, #dc2626) !important; }

/* Spin for progress glyphs, honouring reduced motion. */
@keyframes icms-ico-spin { to { transform: rotate(360deg); } }
.ico-spin { animation: icms-ico-spin 1.1s linear infinite; }
@media (prefers-reduced-motion: reduce) {
	.ico-spin { animation: none; }
}

/* ── Tier C — containers, so icon + label align without per-icon tuning ──
   Each selector below had no `display` of its own, or already set
   inline-flex by hand. Note .icms-libnav-btn previously relied on the
   attribute hack in css/icms-app.css:219-221
   (`[style*="display: inline-flex"]`) to get this behaviour — that hack is
   now redundant, though harmless. */
.icms-btn-primary,
.icms-btn-secondary,
.icms-btn-ghost,
.icms-libnav-btn,
.icms-topbar__link,
.icms-eyebrow,
.icms-module__balance,
.icms-marquee-item,
.icms-footer-contact-line {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}