/* Shared by the guest site and the admin page so the two are one visual system and a palette
   change is one edit. The values are lifted from resources/ui/game_ui_theme.tres; the tokens are
   named for the game's roles rather than for their hex codes, so a theme change there can be
   re-applied here by reading the same StyleBoxFlats. */
:root {
	--ink:            #101a28;
	--ink-plate:      #16222f;
	--slate:          #22334a;
	--slate-raised:   #344a66;
	--quiet:          #5a6e88;
	--muted:          #7b8faa;
	--paper:          #e3eaf3;
	--paper-bright:   #f6f9fc;

	--gold:           #ffb224;
	--gold-deep:      #d98a0b;
	--purple:         #7a5cf0;
	--purple-hover:   #8b6ff9;
	--purple-deep:    #5b3fc4;
	--green:          #24b25c;
	--red:            #f04840;

	--radius:         4px;
	--lip:            6px;
	--gutter:         16px;
}

@font-face {
	font-family: "Noto Sans";
	src: url("/fonts/NotoSans-Regular.ttf") format("truetype");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans";
	src: url("/fonts/NotoSans-Bold.ttf") format("truetype");
	font-weight: 700;
	font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--ink);
	color: var(--paper);
	font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 17px;
	line-height: 1.6;
}

.btn {
	display: inline-block;
	border-radius: var(--radius);
	font-weight: 700;
	text-decoration: none;
	line-height: 1.2;
	transition: background-color 90ms linear, transform 90ms linear;
}

.btn-purple {
	background: var(--purple);
	border-bottom: var(--lip) solid var(--purple-deep);
	color: #fff;
	box-shadow: 0 3px 4px rgba(16, 26, 40, 0.18);
}
.btn-purple:hover { background: var(--purple-hover); }

.btn-gold {
	background: var(--gold);
	border-bottom: var(--lip) solid var(--gold-deep);
	color: var(--slate);
}
.btn-gold:hover { background: #ffc352; }

/* Pressing pushes the face down onto the lip, which is what the game's buttons do. */
.btn:active {
	transform: translateY(2px);
	border-bottom-width: calc(var(--lip) - 2px);
}

.btn-sm { padding: 9px 15px; font-size: 0.95rem; }
.btn-lg { padding: 15px 30px; font-size: 1.1rem; }

a:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 3px;
	border-radius: var(--radius);
}

@media (prefers-reduced-motion: reduce) {
	.btn { transition: none; }
	.btn:active { transform: none; }
}

:root {
	--age_stone_panel:          #fcf1db;
	--age_stone_deep:           #f5e5c6;
	--age_stone_edge:           #ad834b;
	--age_stone_edge_soft:      #caa773;
	--age_stone_active:         #feda92;
	--age_stone_ink:            #3d2818;
	--age_stone_muted:          #79624b;
	--age_stone_accent_ink:     #8a5000;
	--age_stone_accent_top:     #ffc43a;
	--age_stone_accent:         #ffb224;
	--age_stone_accent_lip:     #d98a0b;
	--age_stone_hue:            #907d60;
	--age_stone_quiet:          #fffbf3;

	--age_bronze_panel:         #f9f3ee;
	--age_bronze_deep:          #f2e7db;
	--age_bronze_edge:          #a1754a;
	--age_bronze_edge_soft:     #bca38a;
	--age_bronze_active:        #f3decd;
	--age_bronze_ink:           #362616;
	--age_bronze_muted:         #76593d;
	--age_bronze_accent_ink:    #964b13;
	--age_bronze_accent_top:    #f0b689;
	--age_bronze_accent:        #efad7b;
	--age_bronze_accent_lip:    #b2672f;
	--age_bronze_hue:           #bf6e31;
	--age_bronze_quiet:         #fcfaf8;

	--age_iron_panel:           #faf4ed;
	--age_iron_deep:            #f4e9d9;
	--age_iron_edge:            #a17945;
	--age_iron_edge_soft:       #bfa787;
	--age_iron_active:          #f0dad1;
	--age_iron_ink:             #291e0f;
	--age_iron_muted:           #725837;
	--age_iron_accent_ink:      #7e3f2b;
	--age_iron_accent_top:      #d49b85;
	--age_iron_accent:          #c98b73;
	--age_iron_accent_lip:      #8c4f3a;
	--age_iron_hue:             #906960;
	--age_iron_quiet:           #fdfbf8;

	--age_steel_panel:          #f2f3f5;
	--age_steel_deep:           #e4e6e9;
	--age_steel_edge:           #636e88;
	--age_steel_edge_soft:      #99a0ad;
	--age_steel_active:         #d8dde9;
	--age_steel_ink:            #13161b;
	--age_steel_muted:          #505768;
	--age_steel_accent_ink:     #41588b;
	--age_steel_accent_top:     #a5b3d5;
	--age_steel_accent:         #97a8ce;
	--age_steel_accent_lip:     #52648e;
	--age_steel_hue:            #4363ad;
	--age_steel_quiet:          #fafafb;

	--age_concrete_panel:       #f5f4f2;
	--age_concrete_deep:        #e9e8e5;
	--age_concrete_edge:        #877d64;
	--age_concrete_edge_soft:   #aca79a;
	--age_concrete_active:      #f4eecc;
	--age_concrete_ink:         #2f2c22;
	--age_concrete_muted:       #645e4e;
	--age_concrete_accent_ink:  #6e5d0c;
	--age_concrete_accent_top:  #f3e086;
	--age_concrete_accent:      #eed24f;
	--age_concrete_accent_lip:  #948123;
	--age_concrete_hue:         #c2a82e;
	--age_concrete_quiet:       #fbfbfa;

	--age_silicon_panel:        #eff8f8;
	--age_silicon_deep:         #def0f0;
	--age_silicon_edge:         #488989;
	--age_silicon_edge_soft:    #8eb8b8;
	--age_silicon_active:       #cff1f2;
	--age_silicon_ink:          #1a3737;
	--age_silicon_muted:        #3c6768;
	--age_silicon_accent_ink:   #136c6c;
	--age_silicon_accent_top:   #8eeaeb;
	--age_silicon_accent:       #5ae1e2;
	--age_silicon_accent_lip:   #2e9394;
	--age_silicon_hue:          #2ec1c2;
	--age_silicon_quiet:        #f9fcfc;
}