/**
 * The demo's visual language on every page outside the table.
 *
 * The table itself is the client's demo (assets/demo/table.css). The other
 * pages were built on the Figma's light tokens; this layer re-points those
 * tokens at the demo palette — deep navy ground, glass panels, gold labels —
 * and fixes the few components that used navy as a fill rather than as ink.
 * The login screens keep their own approved design and do not load this.
 */

:root {
	/* Ink: the demo writes white on navy, gold for labels. */
	--navy-900: #ffffff;
	--navy-800: #ffffff;
	--navy-700: #eaf1fc;
	--navy-600: #ffffff;
	--ink:      #eaf1fc;
	--ink-soft: #c6d5e8;
	--muted:    #b6c9e4;
	--muted-2:  #9fb3d1;
	--muted-3:  #9fb3d1;
	--muted-4:  #8ea4c6;
	--link:     #f3d77e;

	/* Grounds and panels. */
	--page:      #071223;
	--surface:   #0f2143;
	--surface-2: #122850;
	--surface-3: #0c1c39;
	--tint:      rgba(163, 197, 240, .07);
	--tint-2:    rgba(163, 197, 240, .1);

	/* Hairlines. */
	--line:      rgba(163, 197, 240, .18);
	--line-soft: rgba(163, 197, 240, .12);
	--line-2:    rgba(163, 197, 240, .14);
	--line-3:    rgba(163, 197, 240, .22);

	--green-050: rgba(47, 158, 99, .14);
	--green-700: #62d996;
	--gold:      #f3d77e;
}

html,
body {
	background: #03070f;
}

body {
	color: var(--ink);
	background:
		radial-gradient(1400px 620px at 50% -14%, rgba(198, 224, 255, .2) 0%, rgba(198, 224, 255, 0) 62%),
		radial-gradient(900px 620px at 8% 4%, rgba(43, 116, 196, .2) 0%, rgba(43, 116, 196, 0) 58%),
		radial-gradient(900px 640px at 96% 6%, rgba(43, 116, 196, .16) 0%, rgba(43, 116, 196, 0) 56%),
		radial-gradient(circle, rgba(163, 197, 240, .055) 1.2px, transparent 1.2px) 0 0 / 26px 26px,
		linear-gradient(172deg, #0b1a36 0%, #071223 52%, #03070f 100%);
	background-attachment: fixed;
	scrollbar-color: #d8b25f rgba(255, 255, 255, .06);
}

a:hover {
	color: #e8492a;
}

/* Header: the demo's glass top bar. */
.site-head {
	background: linear-gradient(180deg, rgba(2, 6, 13, .78), rgba(2, 6, 13, 0));
	backdrop-filter: none;
}

.site-head__inner {
	background: linear-gradient(180deg, rgba(27, 55, 102, .92), rgba(12, 28, 57, .92));
	border: 1px solid rgba(163, 197, 240, .2);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
	backdrop-filter: blur(10px);
}

.brand__logo {
	display: block;
	height: 58px;
	width: auto;
}

.menu-toggle {
	border-color: rgba(163, 197, 240, .3);
	background: rgba(163, 197, 240, .06);
}

.menu-toggle span {
	background: #eaf1fc;
}

@media (max-width: 900px) {
	.site-head[data-menu="true"] .site-nav {
		background: linear-gradient(180deg, #143059, #08142a 62%);
		border-inline-end-color: rgba(216, 178, 95, .38);
		box-shadow: -24px 0 60px rgba(0, 0, 0, .66);
	}

	.site-head[data-menu="true"] .menu-close {
		border-color: rgba(163, 197, 240, .22);
		background: rgba(163, 197, 240, .06);
		color: #eaf1fc;
	}

	.site-nav__list a {
		border-color: rgba(163, 197, 240, .16);
	}

	.site-nav__list .current-menu-item > a {
		border-color: rgba(216, 178, 95, .4);
		background: rgba(216, 178, 95, .12);
	}
}

.site-nav a {
	color: #eaf1fc;
}

.site-nav .current-menu-item > a,
.site-nav a:hover {
	color: #f3d77e;
}

.pill {
	background: rgba(163, 197, 240, .06);
	border-color: rgba(163, 197, 240, .22);
	color: #eaf1fc;
}

.pill:hover {
	background: rgba(163, 197, 240, .14);
	color: #f3d77e;
}

/* The demo's orange call to action, dark enough for white text (4.5:1). */
.pill--cta,
.btn--red,
.btn--primary {
	background: linear-gradient(135deg, #e0431f, #b3301a);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 8px 20px rgba(232, 73, 42, .3);
}

.pill--cta:hover {
	background: linear-gradient(135deg, #ea5230, #c0371e);
	color: #fff;
}

/* Things that used navy as a fill. */
.btn--navy,
.btn--blue,
.chip-pill.is-active,
.tag--owner,
.share-btn--link,
.pack__icon,
.method__mark {
	background: #1d3c6b;
	color: #f3d77e;
	border-color: rgba(216, 178, 95, .34);
}

.btn--navy:hover,
.btn--blue:hover {
	background: #25497f;
	color: #fff;
}

.rank-medallion.is-black {
	background: #14181f;
	color: #fff;
}

.wallet-hero,
.closing-cta {
	background: linear-gradient(135deg, #1b3766, #0c1c39);
	border: 1px solid rgba(216, 178, 95, .28);
	color: #fff;
}

/* Panels: the demo's rounded glass cards. */
.card,
.panel,
.site-foot,
.foot-share {
	border-color: rgba(163, 197, 240, .16);
}

.site-foot {
	background: transparent;
	border-block-start: 1px solid rgba(216, 178, 95, .18);
}

.foot-share__copy strong {
	color: #f3d77e;
}

.foot-bar__brand {
	color: #9fb3d1;
}

.isr-legal-links a {
	color: #b6c9e4;
}

.isr-legal-links a:hover {
	color: #e8492a;
}

/* Forms on dark. */
input,
select,
textarea {
	background: rgba(3, 7, 15, .45);
	border-color: rgba(163, 197, 240, .24);
	color: #eaf1fc;
}

input::placeholder,
textarea::placeholder {
	color: #8ea4c6;
}

/* Tables. */
th {
	color: #f3d77e;
}

:focus-visible {
	outline: 3px solid #7fd0f5;
	outline-offset: 2px;
}

/* A short page still fills the window with the ground, not bare black. */
body {
	min-height: 100vh;
}

/* Brand fills that the token swap turned pale. */
.share-btn--mail {
	background: #4b5d78;
}

.player__length {
	background: rgba(3, 7, 15, .78);
	color: #fff;
}

.leader__role {
	color: #ff7a66;
}

/* Links inside running text stand apart from it, not only by colour. */
.site-main p a,
.site-main li a {
	color: #f3d77e;
	text-decoration: underline;
	text-underline-offset: 3px;
}