/**
 * Investor Portal v2 — design tokens ("Quiet Wealth").
 *
 * Shared by the investor frontend and the admin screens. Loaded BEFORE
 * frontend.css / admin.css. Self-hosted variable fonts — no CDN.
 *
 * Language: understated private-banking luxury. Porcelain surfaces, ink
 * navy text, a single restrained gold accent. Gold is for hairlines,
 * small-caps labels, icons, and hovers — never large surfaces.
 */

/* ------------------------------------------------------------------ *
 * Fonts (variable, latin subset, OFL licensed).
 * ------------------------------------------------------------------ */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-var.woff2') format('woff2');
}

@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/playfair-display-var.woff2') format('woff2');
}

@font-face {
	font-family: 'Playfair Display';
	font-style: italic;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/playfair-display-var-italic.woff2') format('woff2');
}

/* ------------------------------------------------------------------ *
 * Tokens.
 * ------------------------------------------------------------------ */

:root {
	/* Surfaces */
	--inp2-porcelain: #faf9f7;
	--inp2-surface: #ffffff;
	--inp2-surface-raised: #fffefc;
	--inp2-hairline: #e8e4dc;
	--inp2-hairline-soft: #f0ede6;

	/* Ink */
	--inp2-ink: #101e30;
	--inp2-ink-body: #3d4754;
	--inp2-ink-soft: #8a8578;

	/* Accent — restrained gold */
	--inp2-gold: #a98a50;
	--inp2-gold-soft: #c3a878;
	--inp2-gold-wash: #f6f1e7;

	/* Status — deep banking tones, no neon */
	--inp2-positive: #1e6b4f;
	--inp2-positive-wash: #eaf2ee;
	--inp2-negative: #9a3b34;
	--inp2-negative-wash: #f7edec;
	--inp2-info-wash: #eff1f4;

	/* Type */
	--inp2-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--inp2-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--inp2-font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
	--inp2-tracking-caps: 0.14em;

	/* Shape & depth — barely-there */
	--inp2-radius-sm: 6px;
	--inp2-radius: 8px;
	--inp2-radius-lg: 10px;
	--inp2-shadow-card: 0 1px 2px rgba(16, 30, 48, 0.04), 0 8px 28px rgba(16, 30, 48, 0.05);
	--inp2-shadow-lift: 0 2px 4px rgba(16, 30, 48, 0.05), 0 14px 40px rgba(16, 30, 48, 0.08);

	/* Motion — unhurried */
	--inp2-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
	--inp2-duration: 0.2s;
}

/* ------------------------------------------------------------------ *
 * Shared micro-components (used by both frontend and admin).
 * ------------------------------------------------------------------ */

/* Small-caps gold label — section markers, categories, meta headings. */
.inp2-label-caps {
	font-family: var(--inp2-font-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--inp2-tracking-caps);
	text-transform: uppercase;
	color: var(--inp2-gold);
}

/* Gold hairline divider with a short solid start — a signature detail. */
.inp2-rule {
	position: relative;
	border: 0;
	height: 1px;
	background: var(--inp2-hairline);
	margin: 0;
}

.inp2-rule::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: 44px;
	height: 1px;
	background: var(--inp2-gold);
}

/* Status pills */
.inp2-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-family: var(--inp2-font-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.6;
}

.inp2-badge--active {
	background: var(--inp2-positive-wash);
	color: var(--inp2-positive);
}

.inp2-badge--inactive {
	background: var(--inp2-info-wash);
	color: var(--inp2-ink-soft);
}