/*
 * CRX•Money brand tokens — canonical CSS.
 *
 * Single source of truth for the design-system colors and the `.crx-*`
 * application tokens consumed by both surfaces:
 *
 *   - website  (Astro)  → website/public/brand/crx-tokens.css
 *   - app      (Blazor) → CrxMoney.Web/wwwroot/assets/brand/crx-tokens.css
 *
 * Both copies MUST match this master byte-for-byte. After editing this
 * file run `scripts/sync-brand-tokens.sh` to copy it into place and
 * verify parity.
 *
 * Layering, top to bottom:
 *   §5  primitives        — named palette swatches (Porcelain, Graphite…).
 *   §6  semantic pairs    — Forest Green, Sage Green, Steel Blue, …
 *   §11 application tokens (light) — --surface-*, --text-*, --accent-*,
 *                                    --border-*. These are what product
 *                                    surfaces and `.crx-*` components
 *                                    actually consume.
 *   §12 application tokens (dark)  — same names, dark-palette values,
 *                                    auto-applied under:
 *                                      [data-bs-theme="dark"] (Blazor app)
 *                                      .theme-dark              (portable)
 *                                      .brand-product-section--dark
 *                                      (brand-page dark island)
 */

:root,
[data-bs-theme="light"] {
	/* §5 primitives — light palette */
	--color-porcelain-white: #f7f7f4;
	--color-paper-white: #ffffff;
	--color-mist-grey: #d9dadc;
	--color-steel-grey: #8b9097;
	--color-graphite: #2f343a;
	--color-near-black: #1c2025;
	--color-muted-gold: #b08d57;
	--color-deep-gold: #8f5d18;

	/* §5 primitives — dark palette (available as named colors in all modes) */
	--color-midnight-navy: #0d1b2a;
	--color-deep-navy: #132238;
	--color-slate-navy: #1e314a;
	--color-blue-grey: #6e7c8c;
	--color-soft-silver: #c8d0d8;
	--color-off-white: #f3f5f7;
	--color-rich-gold: #c9a14a;
	--color-pale-gold: #e3c978;
	--color-cream-gold: #f1e4bb;

	/* §6 semantic pairs (light hex / dark hex) */
	--color-forest-green: #2f7d57;
	--color-sage-green: #57a37b;
	--color-steel-blue: #4c6e91;
	--color-mist-blue: #7aa7d9;
	--color-rosewood: #a34e58;
	--color-coral-rose: #d77a84;

	/* Extended primitives — app-specific shades that live in the canonical
	 * arsenal even though they are not part of the original §5 brand-guide
	 * swatch families. Every value below was previously hardcoded in the
	 * Blazor app's theme CSS; centralising them here keeps the "no orphan
	 * hex" rule intact across the stack. Document on §5 as "app extensions"
	 * in a follow-up. */
	--color-off-silver: #e7eaee;        /* Dark body copy — brighter than Off White. */
	--color-steel-navy: #2a3c54;        /* Dark border — one step lighter than Slate Navy. */
	--color-link-blue: #a8c8ee;         /* Dark link default. */
	--color-link-blue-hover: #c3daf4;   /* Dark link hover. */
	--color-link-steel: #3b5571;        /* Light link default. */
	--color-link-steel-hover: #2d4258;  /* Light link hover. */
	--color-border-cool: #d8dde3;       /* Light app border — slightly cooler than Mist Grey. */
	--color-panel-soft: #f2f4f6;        /* Light panel-soft — between Porcelain and Mist. */
	--color-surface-soft: #f8f9fb;      /* Light surface-soft — subtle card underlay. */
	--color-cool-mist: #eceff2;         /* Light secondary-bg — cooler than Mist Grey. */
	--color-bone: #ecedea;              /* Light sidebar bg — warm ecru. */
	--color-steel: #4f5b66;             /* Light steel — muted label / table-head text. */

	/* §11 application tokens — light-mode defaults */
	--surface-base: var(--color-porcelain-white);
	--surface-raised: var(--color-paper-white);
	--surface-inset: var(--color-mist-grey);
	--surface-overlay: var(--color-paper-white);

	--text-primary: var(--color-near-black);
	--text-secondary: var(--color-graphite);
	--text-muted: var(--color-steel-grey);
	--text-disabled: var(--color-mist-grey);
	--text-on-accent: var(--color-paper-white);

	--accent-primary: var(--color-graphite);
	--accent-brand: var(--color-muted-gold);
	--accent-brand-deep: var(--color-deep-gold);
	--accent-success: var(--color-forest-green);
	--accent-info: var(--color-steel-blue);
	--accent-warning: var(--color-muted-gold);
	--accent-danger: var(--color-rosewood);

	--border-default: var(--color-mist-grey);
	--border-strong: var(--color-steel-grey);
	--border-focus: var(--color-muted-gold);
}

/* §12 application tokens — dark-mode overrides.
 * Any of these selectors flips the full token set: */
[data-bs-theme="dark"],
.theme-dark,
.brand-product-section--dark {
	--surface-base: var(--color-midnight-navy);
	--surface-raised: var(--color-deep-navy);
	--surface-inset: var(--color-midnight-navy);
	--surface-overlay: var(--color-slate-navy);

	--text-primary: var(--color-off-white);
	--text-secondary: var(--color-soft-silver);
	--text-muted: var(--color-blue-grey);
	--text-disabled: var(--color-slate-navy);
	--text-on-accent: var(--color-midnight-navy);

	--accent-primary: var(--color-rich-gold);
	--accent-brand: var(--color-rich-gold);
	--accent-brand-deep: var(--color-rich-gold);
	--accent-success: var(--color-sage-green);
	--accent-info: var(--color-mist-blue);
	--accent-warning: var(--color-pale-gold);
	--accent-danger: var(--color-coral-rose);

	--border-default: var(--color-slate-navy);
	--border-strong: var(--color-blue-grey);
	--border-focus: var(--color-rich-gold);
}

/* =============================================================
 * .crx-* component inventory
 *
 * Plain-HTML components consumed by the brand-page specimens and
 * the Blazor app. Every rule reads from the application tokens
 * above, so placing any `.crx-*` element under a dark-scope
 * ancestor ([data-bs-theme="dark"] / .theme-dark /
 * .brand-product-section--dark) flips all colors without needing
 * per-component dark variants.
 * ============================================================= */

/* Layout primitives */
.crx-stack {
	display: grid;
	gap: 1rem;
}

.crx-row {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.crx-row--wrap {
	flex-wrap: wrap;
}

/* Button */
.crx-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.55rem 1.1rem;
	border-radius: 0.55rem;
	font-family: InterDisplay, "Segoe UI", Arial, sans-serif;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.15;
	border: 1px solid transparent;
	background: transparent;
	color: var(--text-secondary);
	cursor: pointer;
	transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.crx-button--primary {
	background: var(--accent-primary);
	color: var(--text-on-accent);
}

.crx-button--secondary {
	background: var(--surface-raised);
	color: var(--text-secondary);
	border-color: var(--border-strong);
}

.crx-button:focus-visible {
	outline: 2px solid var(--border-focus);
	outline-offset: 2px;
}

.crx-button:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

/* Field + input */
.crx-field {
	display: grid;
	gap: 0.35rem;
}

.crx-field__label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.crx-input {
	padding: 0.55rem 0.85rem;
	border-radius: 0.5rem;
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	color: var(--text-primary);
	font-family: InterDisplay, "Segoe UI", Arial, sans-serif;
	font-size: 0.92rem;
	line-height: 1.3;
	transition: border-color 140ms ease;
}

.crx-input::placeholder {
	color: var(--text-muted);
	opacity: 0.78;
}

.crx-input:focus-visible {
	outline: none;
	border-color: var(--border-focus);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--border-focus) 30%, transparent);
}

/* Navigation list + selected state */
.crx-nav {
	display: grid;
	gap: 0.1rem;
	padding: 0.35rem;
	border-radius: 0.6rem;
	background: color-mix(in srgb, var(--surface-inset) 45%, transparent);
}

.crx-nav__item {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: 0.4rem;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--text-secondary);
	text-decoration: none;
	transition: background 140ms ease;
}

.crx-nav__item:hover {
	background: color-mix(in srgb, var(--surface-raised) 60%, transparent);
}

.crx-nav__item--selected {
	background: var(--surface-raised);
	color: var(--text-primary);
	box-shadow: inset 3px 0 0 var(--accent-brand);
}

/* Status badges */
.crx-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.25;
}

.crx-badge--neutral {
	background: var(--surface-inset);
	color: var(--text-primary);
}

.crx-badge--info {
	background: var(--accent-info);
	color: var(--text-on-accent);
}

.crx-badge--success {
	background: var(--accent-success);
	color: var(--text-on-accent);
}

.crx-badge--warning {
	background: var(--accent-warning);
	color: var(--text-on-accent);
}

.crx-badge--danger {
	background: var(--accent-danger);
	color: var(--text-on-accent);
}

/* KPI card + delta coloring */
.crx-kpi-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
	gap: 0.75rem;
}

.crx-kpi {
	display: grid;
	gap: 0.25rem;
	padding: 0.75rem 0.9rem;
	border-radius: 0.65rem;
	background: var(--surface-raised);
	border: 1px solid var(--border-default);
}

.crx-kpi__label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.crx-kpi__value {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--text-primary);
	font-variant-numeric: tabular-nums lining-nums;
}

.crx-kpi__delta {
	font-size: 0.78rem;
	font-weight: 600;
}

.crx-kpi__delta--up {
	color: var(--accent-success);
}

.crx-kpi__delta--down {
	color: var(--accent-danger);
}

/* Bar chart */
.crx-chart {
	display: flex;
	align-items: flex-end;
	gap: 0.4rem;
	height: 6rem;
	padding: 0.75rem;
	border-radius: 0.65rem;
	background: var(--surface-raised);
	border: 1px solid var(--border-default);
}

.crx-chart__bar {
	flex: 1;
	min-width: 0;
	border-radius: 0.25rem 0.25rem 0 0;
	background: var(--text-muted);
	opacity: 0.45;
}

.crx-chart__bar--accent {
	background: var(--accent-brand);
	opacity: 1;
}

/* Table + wrap */
.crx-table-wrap {
	background: var(--surface-raised);
	border: 1px solid var(--border-default);
	border-radius: 0.65rem;
	overflow: hidden;
}

.crx-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.86rem;
	font-variant-numeric: tabular-nums lining-nums;
}

.crx-table thead {
	background: var(--surface-inset);
}

.crx-table thead th {
	text-align: left;
	padding: 0.55rem 0.7rem;
	border-bottom: 1px solid var(--border-default);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.crx-table tbody td {
	padding: 0.55rem 0.7rem;
	border-bottom: 1px solid var(--border-default);
	color: var(--text-primary);
}

.crx-table tbody tr:last-child td {
	border-bottom: 0;
}

.crx-table__num {
	text-align: right;
}