/*
 * Design tokens for the modernized UI.
 *
 * Two jobs, in this order:
 *   1. Define the app's own palette/geometry as --es-* custom properties.
 *   2. Re-point Bootstrap's own --bs-* variables at them, so stock Bootstrap
 *      components (buttons, cards, forms, modals, offcanvas, toasts) inherit
 *      the new look instead of each one needing a bespoke override further
 *      down in app.css.
 *
 * Load order matters: bootstrap.min.css -> tokens.css -> custom.css -> app.css.
 * This file must come after Bootstrap (it overrides Bootstrap's :root) and
 * before the two files that consume --es-* tokens.
 */

/*
 * Poppins, self-hosted - Gen-Z dashboard redesign (see README's "Gen-Z
 * refresh Phase 2.1" section). Confirmed via AskUserQuestion against the
 * app's own "zero external runtime network dependency" convention (see the
 * comment on .auth-brand further down the cascade in app.css) - these three
 * weights were vendored from @fontsource/poppins (SIL OFL-1.1) into
 * static/vendor/fonts/poppins/ rather than linked from Google Fonts.
 * --font-heading is what actually opts an element in (see its call sites in
 * app.css); nothing uses these @font-face rules just by existing here.
 */
@font-face {
	font-family: "Poppins";
	src: url("/vendor/fonts/poppins/poppins-latin-600-normal-72993dddf88a63e8f226656f7de88e57.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("/vendor/fonts/poppins/poppins-latin-700-normal-25b0e113ca7cce3770d542736db26368.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("/vendor/fonts/poppins/poppins-latin-800-normal-af4d371a10271dafeb343f1eace762bc.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

:root {
	/*
	 * Heading font for the dashboard redesign's biggest/boldest text (hero
	 * name, hero amount, bento card titles) - system-ui-first fallback
	 * chain so nothing breaks if the woff2s ever fail to load.
	 */
	--font-heading: "Poppins", var(--bs-font-sans-serif, system-ui, sans-serif);

	/*
	 * Neutrals are deliberately cool - a few points of blue mixed into every
	 * grey so they sit under the green/orange accents as a family, rather
	 * than the flat #f8f9fa/#dee2e6 greys Bootstrap ships with.
	 */
	--es-bg: #f3f5fa;
	--es-surface: #ffffff;
	--es-surface-sunk: #f7f8fc;
	--es-surface-hover: #f1f4fd;
	--es-border: #e4e8f0;
	--es-border-strong: #d4dae7;

	--es-text: #171a23;
	--es-text-muted: #5b6478;
	--es-text-subtle: #838ca0;

	/*
	 * Navy/gold refresh (revision of the muted sage/terracotta pass above
	 * this comment used to describe). Same reasoning chain, next step:
	 * per explicit request, the brand pair moved off the green/orange
	 * family entirely onto a navy blue + muted gold pair - exact hex values
	 * given directly ( #2E5E8A blue, #D7B56D gold), confirmed against a
	 * full Groups-page preview (sidebar, hero gradient, summary tiles,
	 * group cards, quick actions, recent activity) before this token
	 * change was made. Sage/terracotta values kept here as a comment for
	 * reference, not because anything still depends on them.
	 * Old (sage): #4f7a63 / hover #3f6350 / active #345244 / soft #e6f0ea / border #b7d0c2
	 * Older (bold green): #15803d / hover #136934 / active #0f5228 / soft #dcfce7 / border #86efac
	 */
	--es-primary: #2e5e8a;
	--es-primary-hover: #264e73;
	--es-primary-active: #1f3e5c;
	--es-primary-soft: #e6ecf1;
	--es-primary-border: #b8c8d8;

	/*
	 * --es-primary-mid: a lighter, brighter step between --es-primary and
	 * --es-accent, used only as the middle stop of the blended gradients
	 * this refresh introduced (dashboard hero, featured group card, group
	 * card hover glow) - keeps that blue-to-gold blend from reading
	 * as two flat colours jammed together.
	 */
	--es-primary-mid: #7796b3;

	/*
	 * Secondary accent - was a muted terracotta (#b56a45), now a muted gold
	 * (#d7b56d) - same revision as --es-primary above, exact hex given
	 * directly. Because this gold is light, it is safe to use as a
	 * background/fill (buttons, soft tints, borders, gradients) but NOT as
	 * a standalone text/icon colour - see --es-accent-on and --es-accent-text
	 * just below, which exist specifically to keep text legible wherever
	 * this accent used to be used directly as a foreground colour.
	 * Old (terracotta): #b56a45 / hover #955636 / active #7a4529 / soft #f3e3d8 / border #e0bfa8
	 * Older (bold orange): #c2410c / hover #9a3412 / active #7c2d12 / soft #ffedd5 / border #fdba74
	 */
	--es-accent: #d7b56d;
	--es-accent-hover: #c89a37;
	--es-accent-active: #a07b2c;
	--es-accent-soft: #f3e9d3;
	--es-accent-border: #e6cf9a;

	/*
	 * --es-accent-on: text/icon colour for anything sitting on a SOLID
	 * --es-accent/-hover/-active fill (buttons, the active sidebar link,
	 * the Cancel-settlement pill). White text on the literal gold hex only
	 * reaches ~1.9:1 contrast (WCAG AA needs 4.5:1 for normal text), so
	 * this is a dark bronze instead - ~6.6:1 against the base accent fill.
	 *
	 * --es-accent-text: gold-family colour for text/icons that sit directly
	 * on a light background (a white card, or the pale --es-accent-soft
	 * tint) rather than a solid accent fill - the base/hover gold is too
	 * light to read reliably at UI text sizes there (also ~1.9-2.7:1); this
	 * darker step clears ~5:1 against white while still reading as gold.
	 */
	--es-accent-on: #3d2f10;
	--es-accent-text: #8a6a25;

	/*
	 * Semantic accents. Success still shares the primary's colour family (a
	 * "Paid" pill and the brand colour reading as one family is still the
	 * point) - now the navy blue rather than sage green; warning/danger are
	 * unchanged, this revision (like the one before it) was scoped to the
	 * primary/accent pair only.
	 */
	--es-success: #2e5e8a;
	--es-success-soft: #e6ecf1;
	--es-warning: #a16207;
	--es-warning-soft: #fef3c7;
	--es-danger: #b3341f;
	--es-danger-soft: #fbe5e0;

	/*
	 * Bigger radii across the board - buttons/inputs 10px, chip/badge-ish
	 * elements 14px, cards 20px - per the refresh spec's "increased corner
	 * radii" direction. Pill stays a true pill.
	 */
	--es-r-sm: 10px;
	--es-r-md: 14px;
	--es-r-lg: 20px;
	--es-r-pill: 999px;

	/*
	 * Deeper, slightly more present shadows than the original subtle set -
	 * still soft/low-opacity (this is still a light, airy UI) but with more
	 * spread so cards and popovers read with real depth, not just a hairline
	 * border.
	 */
	--es-shadow-sm: 0 1px 2px rgba(23, 26, 35, .05), 0 2px 4px rgba(23, 26, 35, .07);
	--es-shadow-md: 0 4px 10px rgba(23, 26, 35, .07), 0 10px 24px rgba(23, 26, 35, .09);
	--es-shadow-lg: 0 12px 32px rgba(23, 26, 35, .14), 0 4px 10px rgba(23, 26, 35, .07);

	--es-sidebar-w: 248px;
	--es-topbar-h: 64px;
	/* Navy brand strip (desktop top bar): height and the gap above it. */
	--es-strip-h: 56px;
	--es-strip-gap: 14px;

	/* ---- Bootstrap variable overrides ---- */

	--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

	--bs-body-bg: var(--es-bg);
	--bs-body-color: var(--es-text);
	--bs-secondary-color: var(--es-text-muted);
	--bs-tertiary-color: var(--es-text-subtle);
	--bs-border-color: var(--es-border);
	--bs-secondary-bg: var(--es-surface-sunk);
	--bs-tertiary-bg: var(--es-surface-sunk);

	--bs-primary: var(--es-primary);
	--bs-primary-rgb: 46, 94, 138;
	--bs-link-color: var(--es-primary);
	--bs-link-color-rgb: 46, 94, 138;
	--bs-link-hover-color: var(--es-primary-hover);

	--bs-border-radius: var(--es-r-md);
	--bs-border-radius-sm: var(--es-r-sm);
	--bs-border-radius-lg: var(--es-r-lg);
	--bs-border-radius-xl: var(--es-r-lg);
	--bs-border-radius-pill: var(--es-r-pill);
}

/*
 * Bootstrap's button/card/form colours come from component-scoped variables
 * (--bs-btn-bg and friends), not from :root - so re-pointing --bs-primary
 * above is not enough on its own and these have to be set per component.
 */

.btn-primary {
	--bs-btn-bg: var(--es-primary);
	--bs-btn-border-color: var(--es-primary);
	--bs-btn-hover-bg: var(--es-primary-hover);
	--bs-btn-hover-border-color: var(--es-primary-hover);
	--bs-btn-active-bg: var(--es-primary-active);
	--bs-btn-active-border-color: var(--es-primary-active);
	--bs-btn-disabled-bg: var(--es-primary);
	--bs-btn-disabled-border-color: var(--es-primary);
	--bs-btn-focus-shadow-rgb: 46, 94, 138;
}

/*
 * Gold accent button - same shape/mechanics as .btn-primary, for the one
 * or two spots per page that want to stand out from the navy primary
 * action rather than repeat it (see app.css call sites). Text colour is
 * --es-accent-on (dark bronze), not white - see its definition above for
 * why plain white text on this gold fails contrast.
 */
.btn-accent {
	--bs-btn-color: var(--es-accent-on);
	--bs-btn-bg: var(--es-accent);
	--bs-btn-border-color: var(--es-accent);
	--bs-btn-hover-color: var(--es-accent-on);
	--bs-btn-hover-bg: var(--es-accent-hover);
	--bs-btn-hover-border-color: var(--es-accent-hover);
	--bs-btn-active-color: var(--es-accent-on);
	--bs-btn-active-bg: var(--es-accent-active);
	--bs-btn-active-border-color: var(--es-accent-active);
	--bs-btn-disabled-bg: var(--es-accent);
	--bs-btn-disabled-border-color: var(--es-accent);
	--bs-btn-focus-shadow-rgb: 215, 181, 109;
}

/*
 * Micro-interactions: every Bootstrap button gets a small lift on hover and
 * settles back down (and slightly under its resting position) on press, on
 * top of Bootstrap's own colour-swap transition. prefers-reduced-motion
 * users are opted out via app.css's existing global media query.
 */
.btn {
	transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
}

.btn:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: var(--es-shadow-sm);
}

.btn:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: none;
}

.btn-outline-secondary {
	--bs-btn-color: var(--es-text-muted);
	--bs-btn-border-color: var(--es-border-strong);
	--bs-btn-hover-bg: var(--es-surface-sunk);
	--bs-btn-hover-border-color: var(--es-border-strong);
	--bs-btn-hover-color: var(--es-text);
	--bs-btn-active-bg: var(--es-surface-hover);
	--bs-btn-active-border-color: var(--es-border-strong);
	--bs-btn-active-color: var(--es-text);
}

.btn-danger {
	--bs-btn-bg: var(--es-danger);
	--bs-btn-border-color: var(--es-danger);
	--bs-btn-hover-bg: #9c2c1a;
	--bs-btn-hover-border-color: #9c2c1a;
	--bs-btn-active-bg: #8a2717;
	--bs-btn-active-border-color: #8a2717;
	--bs-btn-focus-shadow-rgb: 179, 52, 31;
}

/*
 * Bootstrap defaults --bs-table-bg to --bs-body-bg and paints it onto every
 * cell. That was invisible while the body was white, but the body is a
 * tinted grey now, so table cells would stamp the page colour on top of
 * whatever surface the table actually sits on (the members table sits on the
 * white drawer). Transparent lets the real surface show through.
 */
.table {
	--bs-table-bg: transparent;
}

.card {
	--bs-card-bg: var(--es-surface);
	--bs-card-border-color: var(--es-border);
	--bs-card-border-radius: var(--es-r-lg);
	--bs-card-inner-border-radius: calc(var(--es-r-lg) - 1px);
}

.modal {
	--bs-modal-bg: var(--es-surface);
	--bs-modal-border-color: var(--es-border);
	--bs-modal-border-radius: var(--es-r-lg);
	--bs-modal-header-border-color: var(--es-border);
	--bs-modal-footer-border-color: var(--es-border);
}

.offcanvas, .offcanvas-lg {
	--bs-offcanvas-bg: var(--es-surface);
	--bs-offcanvas-border-color: var(--es-border);
}

.form-control, .form-select {
	border-color: var(--es-border-strong);
	border-radius: var(--es-r-sm);
	padding: .5rem .75rem;
}

/* The shorthand above also resets Bootstrap's right padding, which reserves room
   for the dropdown arrow - restore it so long values end in "..." before the arrow. */
.form-select {
	padding-right: 2.25rem;
}

.form-control:focus, .form-select:focus {
	border-color: var(--es-primary-border);
	box-shadow: 0 0 0 3px var(--es-primary-soft);
}

.form-label {
	font-weight: 550;
	font-size: .875rem;
	color: var(--es-text);
	margin-bottom: .35rem;
}

.form-text {
	color: var(--es-text-subtle);
	font-size: .8rem;
}

.alert {
	--bs-alert-border-color: transparent;
	border-radius: var(--es-r-sm);
}

.alert-info {
	--bs-alert-bg: var(--es-primary-soft);
	--bs-alert-color: var(--es-primary-active);
}

.alert-secondary {
	--bs-alert-bg: var(--es-surface-sunk);
	--bs-alert-color: var(--es-text-muted);
}

.alert-danger {
	--bs-alert-bg: var(--es-danger-soft);
	--bs-alert-color: var(--es-danger);
}

.alert-success {
	--bs-alert-bg: var(--es-success-soft);
	--bs-alert-color: var(--es-success);
}