:root {

	--sd-gold:       #f0ba37;   /* fill: primary CTA, accent bars, active state */
	--sd-gold-line:  #c89a1f;   /* border on a gold fill */

	--sd-gold-dark:  #7a5a00;   /* gold as INK on light (headings, stat numbers) */
	--sd-gold-ink:   #2a1f00;   /* text ON a gold fill */
	--sd-gold-soft:  #fff2c2;   /* very light gold fill (tier badge, chips) */
	--sd-link:       #b27d00;

	--sd-ok:         #2f9e44;
	--sd-ok-bg:      #e7f4e9;
	--sd-ok-line:    #b9e0bf;

	--sd-ok-ink:     #1e7030;
	--sd-warn:       #b32d2e;
	--sd-warn-bg:    #fbeaea;
	--sd-warn-line:  #e7b9b9;

	--sd-surface:    #fffdf6;   /* card fill */
	--sd-surface-2:  #fff8df;   /* area fill / hover / table head */
	--sd-highlight:  #ffef9e;   /* spotlight ("Sudoku des Tages") */
	--sd-line:       #e7ddbd;   /* hairline on warm surfaces */
	--sd-line-soft:  #f0e8cd;   /* inner hairline (table rows) */
	--sd-line-cool:  #e0e0e0;   /* hairline on white/neutral surfaces */
	--sd-text:       #20242c;
	--sd-muted:      #6b6f59;
	--sd-white:      #fff;

	/* Form fields — one fill/line pair for every input, select and textarea. */
	--sd-field-bg:   #fff;
	--sd-field-line: #ccc;

	--sd-scrim:      rgba(255, 255, 255, .78);

	/* Legacy alias kept so existing rules keep resolving. */
	--sd-yellow-2:   var(--sd-highlight);

	--sd-radius-sm:   4px;      /* chips, inputs, small controls */
	--sd-radius:      8px;      /* buttons, boxes, cards — the default */
	--sd-radius-lg:  12px;      /* large panels / hero cards */
	--sd-radius-pill: 999px;    /* pills — own role, not a drift */

	--sd-shadow-sm: 0 2px 8px rgba(60, 50, 0, .06);
	--sd-shadow-md: 0 6px 22px rgba(60, 50, 0, .08);
	--sd-shadow-lg: 0 14px 38px rgba(60, 50, 0, .12);
	--sd-shadow:    var(--sd-shadow-md);   /* legacy alias (account.css) */

	--sd-font:       Arial, Helvetica, sans-serif;
	--sd-font-brand: Verdana, Arial, sans-serif;
	--sd-font-mono:  Consolas, Menlo, monospace;

	--sd-font-size-base: 15px;

	--sd-fs-2xs:     calc(var(--sd-font-size-base) * (10.88 / 14));
	--sd-fs-xs:      calc(var(--sd-font-size-base) * (12.48 / 14));
	--sd-fs-sm:      calc(var(--sd-font-size-base) * (13.6 / 14));
	--sd-fs-base:    calc(var(--sd-font-size-base) * (16 / 14));

	--sd-fs-eyebrow: calc(var(--sd-font-size-base) * (14 / 14));
	--sd-fs-lg:      calc(var(--sd-font-size-base) * (18.4 / 14));
	--sd-fs-xl:      calc(var(--sd-font-size-base) * (22.4 / 14));

	--sd-btn-weight: 600;

	/* Focus ring — one look for every interactive primitive. */
	--sd-focus: 0 0 0 3px rgba(240, 186, 55, .38);
}

/* Blocksy's own button channel is pointed at the same token, so the theme button
   families (Gutenberg .wp-block-button__link, .ct-button, the WooCommerce
   .button family, every [type=submit]) cannot disagree with our primitive —
   they all read `font-weight: var(--theme-button-font-weight)` from the theme's
   own stylesheet.
   `html:root` (0,1,1), not `:root` (0,1,0), on purpose: Blocksy's generated
   uploads/blocksy/css/global.css declares the same variable on `:root`, and
   which of two equal-specificity rules wins would otherwise depend on enqueue
   order — the exact trap that produced the last three reopens. The Customizer's
   button typography weight is therefore NOT the lever any more (SD5_Admin.md §3):
   the design system owns the button weight. */
html:root {
	--theme-button-font-weight: var(--sd-btn-weight);

	--ico-line:     #1d1d1f;
	--ico-cell:     #ffffff;
	--ico-gold:     #f2b60c;
	--ico-gold-d:   #c98a00;
	--ico-blue:     #2f7fd8;
	--ico-blue-d:   #1b5fa8;
	--ico-red:      #d8322a;
	--ico-green:    #57b84a;
	--ico-green-d:  #3f9636;
	--ico-silver:   #c6cad1;
	--ico-silver-d: #868b95;
	--ico-wood:     #e0a35a;

	--theme-font-size: var(--sd-font-size-base);
}

html[data-theme="dark"] {
	--sd-surface:    #1e2128;
	--sd-surface-2:  #241f16;
	--sd-highlight:  #2b2410;
	--sd-line:       #3a3324;
	--sd-line-soft:  #2c2a22;
	--sd-line-cool:  #3a4049;
	--sd-text:       #e6e9ef;
	--sd-muted:      #9aa3b2;
	--sd-white:      #24272f;
	--sd-field-bg:   #2a2e37;
	--sd-field-line: #3a4049;
	--sd-link:       #e0b968;
	--sd-gold-dark:  #e8c979;
	--sd-gold-soft:  #2b2410;
	--sd-ok-bg:      #16241b;
	--sd-ok-line:    #2f6b3f;
	--sd-ok-ink:     #7ad692;   /* dunkel gedreht: 9,11:1 auf --sd-ok-bg */
	--sd-warn-bg:    #2a1618;
	--sd-warn-line:  #b3564e;

	--sd-scrim:      rgba(10, 12, 16, .72);

	--sd-shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
	--sd-shadow-md: 0 6px 22px rgba(0, 0, 0, .45);
	--sd-shadow-lg: 0 14px 38px rgba(0, 0, 0, .55);

	/* Brett-Symbole im Dunkeln — dasselbe Set wie in game.css. Dunkel-Signal
	   ausschließlich `html[data-theme]`, nie `@media (prefers-color-scheme)`. */
	--ico-line:     #d7dce6;
	--ico-cell:     #eef2f8;
	--ico-gold:     #f5c63b;
	--ico-gold-d:   #caa02f;
	--ico-blue:     #4b95e6;
	--ico-blue-d:   #2f7fd8;
	--ico-red:      #ff6b6b;
	--ico-green:    #63c855;
	--ico-green-d:  #4aa53f;
	--ico-silver:   #aeb4bf;
	--ico-silver-d: #767c86;
	--ico-wood:     #d99f5c;
}

.sd-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius);
	background: var(--sd-white);
	color: var(--sd-text);
	font: inherit;
	font-weight: var(--sd-btn-weight);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s, border-color .15s;
}
.sd-btn:hover,
.sd-btn:focus { background: var(--sd-surface-2); }
.sd-btn:focus-visible { outline: none; box-shadow: var(--sd-focus); }
.sd-btn[disabled],
.sd-btn.is-disabled { opacity: .55; cursor: default; }

.sd-btn--primary {
	background: var(--sd-gold);
	border-color: var(--sd-gold-line);
	color: var(--sd-gold-ink);
}

.sd-btn--primary:hover,
.sd-btn--primary:focus { background: var(--sd-gold-dark); color: var(--sd-gold-ink); }

/* --ghost is the base look; kept as an explicit modifier for readable markup. */
.sd-btn--ghost { background: var(--sd-white); }
/* Size modifiers change geometry only — the WEIGHT is one value site-wide
   (--sd-btn-weight), so a small button is not a lighter button (6. reopen). */
.sd-btn--sm    { min-height: 32px; padding: 6px 11px; font-size: var(--sd-fs-sm); }
.sd-btn--lg    { min-height: 48px; padding: 12px 20px; font-size: var(--sd-fs-lg); }
.sd-btn--danger { color: var(--sd-warn); }
.sd-btn--block { display: flex; width: 100%; }

button.sd-btn,
input.sd-btn {
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius);
	background: var(--sd-white);
	color: var(--sd-text);
	font-weight: var(--sd-btn-weight);
}
button.sd-btn:hover,
button.sd-btn:focus,
input.sd-btn:hover,
input.sd-btn:focus { background: var(--sd-surface-2); color: var(--sd-text); }
button.sd-btn--primary,
input.sd-btn--primary {
	background: var(--sd-gold);
	border-color: var(--sd-gold-line);
	color: var(--sd-gold-ink);
}
button.sd-btn--primary:hover,
button.sd-btn--primary:focus,
input.sd-btn--primary:hover,
input.sd-btn--primary:focus { background: var(--sd-gold-dark); color: var(--sd-gold-ink); }
button.sd-btn--ghost,
input.sd-btn--ghost { background: var(--sd-white); }
button.sd-btn--danger,
input.sd-btn--danger { color: var(--sd-warn); }
button.sd-btn--danger:hover,
button.sd-btn--danger:focus,
input.sd-btn--danger:hover,
input.sd-btn--danger:focus {
	background: var(--sd-warn-bg);
	border-color: var(--sd-warn-line);
	color: var(--sd-warn);
}

.sd-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border-radius: var(--sd-radius-pill);
	border: 1px solid var(--sd-line);
	background: var(--sd-white);
	color: var(--sd-text);
	font-size: var(--sd-fs-xs);
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.5;
	white-space: nowrap;
	vertical-align: middle;
}
.sd-badge--tier    { background: var(--sd-gold-soft); border-color: var(--sd-gold); color: var(--sd-gold-dark); }
.sd-badge--gold    { background: var(--sd-gold-soft); border-color: var(--sd-gold); color: var(--sd-gold-dark); }
.sd-badge--silver  { background: #eef0f2; border-color: #c9ccd1; color: #5a6068; }
.sd-badge--ranked  { background: #1f7a3d; border-color: #155a2c; color: #fff; }
.sd-badge--casual  { background: #eef0f2; border-color: #d3d7db; color: #444; }
.sd-badge--assisted{ background: #e7e3ee; border-color: #c4b5d8; color: #6b21a8; }
.sd-badge--rank    { background: var(--sd-gold-soft); border-color: var(--sd-gold); color: var(--sd-gold-ink); }
.sd-badge--mode    { background: var(--sd-white); border-color: var(--sd-line); color: var(--sd-text); }
/* News chip: the fill colour comes from the taxonomy (inline style), so only
   shape + ink are defined here. Own class → no more `.tssd-badge` collision. */
.sd-badge--news    { border-color: transparent; color: #fff; }

html[data-theme="dark"] .sd-badge--silver { background: #2a2e37; border-color: #3a4049; color: #c0c6cf; }

.sd-card {
	background: var(--sd-surface);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius);
	box-shadow: var(--sd-shadow-sm);
	padding: 18px 20px;
	margin: 0 0 18px;
}
.sd-card--accent {
	background: var(--sd-surface-2);
	border-left: 6px solid var(--sd-gold);
}
.sd-card--spot { background: var(--sd-highlight); }
.sd-card--sm   { padding: 10px 12px; margin-bottom: 12px; }
.sd-card--flat { box-shadow: none; }

/* ── Tile grid ─────────────────────────────────────────────────── */

.sd-grid    { display: grid; gap: 16px; margin: 0 0 18px; }
.sd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 600px) {
	.sd-grid--2, .sd-grid--3 { grid-template-columns: 1fr; }
}

/* ── Stat tile ───────────────────────────────────────────────────────────── */
.sd-stat {
	background: var(--sd-surface-2);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius);
	padding: 14px 16px;
	text-align: center;
}
.sd-stat__num   { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: var(--sd-gold-dark); }
.sd-stat__label { display: block; margin-top: 2px; font-size: var(--sd-fs-sm); color: var(--sd-muted); }

.sd-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .94rem;
}
.sd-table thead th {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 2px solid var(--sd-line);
	background: var(--sd-surface-2);
	color: var(--sd-muted);
	font-size: var(--sd-fs-xs);
	letter-spacing: .03em;
	text-transform: uppercase;
}
.sd-table tbody td {
	padding: 11px 12px;
	border-bottom: 1px solid var(--sd-line-soft);
	vertical-align: middle;
}
.sd-table tbody tr:hover { background: var(--sd-surface-2); }
.sd-table .num     { text-align: right; font-variant-numeric: tabular-nums; }
.sd-table .actions { text-align: right; white-space: nowrap; }

.sd-msg {
	padding: 10px 14px;
	border: 1px solid var(--sd-line);
	border-left: 4px solid var(--sd-muted);
	border-radius: var(--sd-radius);
	background: var(--sd-surface-2);
	margin: 0 0 14px;
}
.sd-msg--ok  { background: var(--sd-ok-bg);   border-color: var(--sd-ok-line);   border-left-color: var(--sd-ok); }
.sd-msg--err { background: var(--sd-warn-bg); border-color: var(--sd-warn-line); border-left-color: var(--sd-warn); }

.sd-link-removed {
	position: relative;
	text-decoration-line: line-through;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--sd-muted);
	color: var(--sd-muted);
	cursor: help;
}
.sd-link-removed:focus-visible { outline: none; box-shadow: var(--sd-focus); border-radius: var(--sd-radius-sm); }

.sd-tip { position: relative; cursor: help; }
.sd-tip__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	margin-left: 4px;
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius-pill);
	background: var(--sd-surface);
	color: var(--sd-muted);
	font-size: var(--sd-fs-2xs);
	font-weight: 700;
	line-height: 1;
	vertical-align: middle;
}
.sd-tip:hover .sd-tip__icon { border-color: var(--sd-gold-line); color: var(--sd-gold-dark); }
.sd-link-removed[data-tip]:hover::after,
.sd-link-removed[data-tip]:focus::after,
.sd-tip[data-tip]:hover::after,
.sd-tip[data-tip]:focus-within::after {
	content: attr(data-tip);
	position: absolute;
	bottom: 100%;
	left: 0;
	margin-bottom: 8px;
	width: max-content;
	max-width: 260px;
	padding: 7px 10px;
	background: var(--sd-surface);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius);
	box-shadow: var(--sd-shadow-md);
	color: var(--sd-text);
	font-size: var(--sd-fs-xs);
	font-weight: 400;
	line-height: 1.35;
	text-align: left;
	text-decoration: none;
	white-space: normal;
	z-index: 20;
	pointer-events: none;
}

/* ── Small helpers used across features ──────────────────────────────────── */
.sd-muted { color: var(--sd-muted); }
.sd-help  { font-size: var(--sd-fs-sm); color: var(--sd-muted); }

.sd-help a:not([class]),
.tssd-contest-results__infolinks a:not([class]) {
	color: var(--sd-gold-dark);
	text-decoration-line: underline;
	text-underline-offset: 0.15em;
}

.tssd-vat-note {
	font-size: var(--sd-fs-xs);

	white-space: normal;
}

/* Die Zeile unter einer Summe (Warenkorb, Kasse) steckt in einer Tabelle, die für
   „Beschriftung + Betrag" gebaut ist: rechtsbündig, halbfett. Ein SATZ liest sich so
   nicht. Er richtet sich deshalb selbst aus — als Block, denn `text-align` auf einem
   inline-Element regelt nichts. Damit sieht der Satz auf allen sechs Flächen gleich
   aus, ohne dass ein Theme dafür etwas wissen muss (Globalregel 2). */
.tssd-vat-note-row .tssd-vat-note {
	display: block;
	text-align: left;
	font-weight: 400;
}

.sd-uikey {
	color: var(--sd-gold-dark);
	font-style: italic;
}