/* Mavericks Online-Hitparade - shared design tokens and fonts (self-hosted, no Google requests) */

@font-face
{
	font-family: "Rye";
	src: url("../fonts/rye-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

@font-face
{
	font-family: "Yellowtail";
	src: url("../fonts/yellowtail-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

@font-face
{
	font-family: "Roboto Slab";
	src: url("../fonts/roboto-slab-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

@font-face
{
	font-family: "Roboto Slab";
	src: url("../fonts/roboto-slab-latin-700-normal.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

:root
{
	--red:        #8f271e;
	--red-dark:   #6e1d16;
	--red-deep:   #4a130e;
	--cream:      #f0cf93;
	--cream-soft: #f7e6c4;
	--paper:      #fbf5ea;
	--card:       #ffffff;
	--ink:        #2b1b14;
	--ink-soft:   #6d5a4e;
	--line:       #e6d6bd;
	--ok:         #3f7a2a;
	--warn:       #b3261e;
	--radius:     12px;
	--shadow:     0 2px 10px rgba(74, 19, 14, .12);
	--font-head:  "Rye", Georgia, serif;
	--font-script:"Yellowtail", "Brush Script MT", cursive;
	--font-body:  "Roboto Slab", Georgia, "Times New Roman", serif;

	/* Semantic tokens - light mode */
	color-scheme: light;
	--page-bg:        #fbf5ea;
	--admin-bg:       #f4ece0;
	--heading:        var(--red);
	--link:           var(--red);
	--accent:         var(--red);
	--accent-text:    var(--red);
	--selected-bg:    #fff8ec;
	--highlight-bg:   #fff6e3;
	--toolbar-bg:     rgba(251, 245, 234, .96);
	--success-bg:     #e3f0da;
	--success-text:   #2d5a1d;
	--error-bg:       #f9dcda;
	--error-text:     #8a1d16;
	--neutral-bg:     #eeeeee;
	--neutral-text:   #666666;
	--warn-text:      var(--warn);

	/* Live monitor */
	--monitor-bg:      #f4ece0;
	--monitor-text:    var(--ink);
	--monitor-heading: var(--red);
	--monitor-panel:   #ffffff;
	--monitor-track:   rgba(74, 19, 14, .1);
	--monitor-divider: var(--line);
	--monitor-number:  var(--red);
}

/* Dark mode (default). Tokens duplicated for data-theme="auto" + dark device setting. */
:root[data-theme="dark"]
{
	color-scheme: dark;
	--page-bg:        #1a0f0b;
	--admin-bg:       #1a0f0b;
	--paper:          #22150f;
	--card:           #2a1a13;
	--ink:            #f3e6cf;
	--ink-soft:       #c4ad93;
	--line:           #4a3126;
	--heading:        #f0cf93;
	--link:           #f0cf93;
	--accent:         #d4553f;
	--accent-text:    #f0cf93;
	--selected-bg:    #3b1d15;
	--highlight-bg:   #36271a;
	--toolbar-bg:     rgba(26, 15, 11, .94);
	--success-bg:     #1f3a16;
	--success-text:   #bfe3a8;
	--error-bg:       #4a1a16;
	--error-text:     #ffc2bb;
	--neutral-bg:     #3a302b;
	--neutral-text:   #bbbbbb;
	--warn-text:      #ff8a7a;
	--shadow:         0 2px 12px rgba(0, 0, 0, .45);
	--chip-inactive-text: var(--ink);
	--monitor-bg:      var(--red-deep);
	--monitor-text:    var(--cream-soft);
	--monitor-heading: var(--cream);
	--monitor-panel:   rgba(0, 0, 0, .22);
	--monitor-track:   rgba(255, 255, 255, .12);
	--monitor-divider: rgba(240, 207, 147, .2);
	--monitor-number:  var(--cream);
}

@media (prefers-color-scheme: dark)
{
	:root[data-theme="auto"]
	{
		color-scheme: dark;
		--page-bg:        #1a0f0b;
		--admin-bg:       #1a0f0b;
		--paper:          #22150f;
		--card:           #2a1a13;
		--ink:            #f3e6cf;
		--ink-soft:       #c4ad93;
		--line:           #4a3126;
		--heading:        #f0cf93;
		--link:           #f0cf93;
		--accent:         #d4553f;
		--accent-text:    #f0cf93;
		--selected-bg:    #3b1d15;
		--highlight-bg:   #36271a;
		--toolbar-bg:     rgba(26, 15, 11, .94);
		--success-bg:     #1f3a16;
		--success-text:   #bfe3a8;
		--error-bg:       #4a1a16;
		--error-text:     #ffc2bb;
		--neutral-bg:     #3a302b;
		--neutral-text:   #bbbbbb;
		--warn-text:      #ff8a7a;
		--shadow:         0 2px 12px rgba(0, 0, 0, .45);
		--chip-inactive-text: var(--ink);
		--monitor-bg:      var(--red-deep);
		--monitor-text:    var(--cream-soft);
		--monitor-heading: var(--cream);
		--monitor-panel:   rgba(0, 0, 0, .22);
		--monitor-track:   rgba(255, 255, 255, .12);
		--monitor-divider: rgba(240, 207, 147, .2);
		--monitor-number:  var(--cream);
	}
}

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

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

body
{
	margin: 0;
	font-family: var(--font-body);
	color: var(--ink);
	background: var(--page-bg);
	line-height: 1.45;
}

a
{
	color: var(--link);
}

.brand-bar
{
	background: var(--red) radial-gradient(ellipse at 50% 30%, #9c2e22 0%, var(--red) 55%, var(--red-dark) 100%);
	color: var(--cream);
}

.btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	min-height: 44px;
	padding: .6em 1.2em;
	border: 2px solid var(--red);
	border-radius: 999px;
	background: var(--red);
	color: var(--cream-soft);
	font: 700 1rem var(--font-body);
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, transform .1s;
}

.btn:hover
{
	background: var(--red-dark);
}

.btn:active
{
	transform: scale(.97);
}

.btn-outline
{
	background: transparent;
	border-color: var(--accent);
	color: var(--accent-text);
}

.btn-outline:hover
{
	background: var(--selected-bg);
}

.btn-small
{
	min-height: 34px;
	padding: .3em .9em;
	font-size: .88rem;
}

.btn[disabled]
{
	opacity: .5;
	cursor: not-allowed;
}

.tag-badge
{
	display: inline-block;
	padding: .05em .55em;
	border-radius: 999px;
	color: #fff;
	font-size: .72rem;
	line-height: 1.6;
	white-space: nowrap;
}

.visually-hidden
{
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}