/*
 * CyberSlam design tokens.
 *
 * GENERATED FILE — DO NOT EDIT.
 * Source:    cyberslam-design-system/assets/tokens.json
 * Generator: cyberslam-design-system/bin/csds-build-tokens.php
 *
 * Edit the source and re-run the generator, or use Design tokens →
 * Make these the defaults. A value changed here is a silent fork of
 * the design system.
 *
 * CyberSlam v1
 */

:root {

	/* ---- Color ----------------------------------------------------- */
	/* One theme only. CyberSlam has no light mode; the ground is black. */
	--csds-surface-base: #080808; /* Page background — the base layer of every screen and the ground behind all other surfaces. */
	--csds-surface-base-rgb: 8 8 8; /* The surface-base channels, for the one case a custom property cannot serve: a scrim or gradient that needs the page ground at partial alpha — rgb… */
	--csds-surface-panel: #111214; /* Primary panel and card fill. Text: ink (14.2:1) or ink-muted (10.9:1). */
	--csds-surface-raised: #1B1C1E; /* Secondary surfaces — nested panels, table rows, modal fill, dropdown menus. Text: ink or ink-muted. */
	--csds-border-default: #292A2B; /* Standard 1px border/divider on surface-panel and surface-raised (paired with border-hairline). */
	--csds-ink: #E7D8B7; /* Primary text on surface-base, surface-panel and surface-raised (14.2:1 on surface-base). */
	--csds-ink-muted: #CDBE9F; /* Secondary text — captions, timestamps, metadata — on surface-base, surface-panel and surface-raised (10.9:1 on surface-base). */
	--csds-crimson: #C9151E; /* Primary brand accent. As a FILL behind ink text (active tab, primary badges): 4.1:1 — use only for bold/uppercase labels 14px+, never small body … */
	--csds-blood: #8F1017; /* Dark crimson — destructive button fill, loss indicators, pressed state of a crimson control. Pair with ink text only at bold/uppercase button-lab… */
	--csds-scarlet: #E3262E; /* Active/high-energy state — live indicators, hover/focus on crimson elements, favored-odds highlight. */
	--csds-gold: #B8943C; /* Championship and premium fills — belt art, champion name links, premium button accents, gold borders (7.0:1 on surface-base). */
	--csds-gold-light: #D8BB69; /* Gold highlights and shine — hover state on gold elements, championship title text on surface-base (10.7:1). */
	--csds-gold-dark: #735A25; /* Gold shadow/recess — pressed state and inner edges of gold elements. Decorative only, not for text. */
	--csds-toxic-green: #21A56A; /* Active / win / positive state — win counts, the ACTIVE status dot and label, favorable odds (6.3:1 on surface-base). */
	--csds-electric-purple: #7252B8; /* Perk and rare/special-system indicators only — perk badges, rare-item icons. 3.5:1 on surface-base: pair with the perk icon or a surface-raised c… */
	--csds-state-win: var(--csds-toxic-green); /* Semantic alias for a win, an active wrestler, or a positive effect. Prefer this name over toxic-green in win/loss/status logic. */
	--csds-state-loss: var(--csds-crimson); /* Semantic alias for a loss, a destructive action, or danger. Prefer this name over crimson in win/loss/status logic. */
	--csds-state-draw: var(--csds-ink-muted); /* Semantic alias for a draw or neutral state in records and standings. */
	--csds-state-championship: var(--csds-gold); /* Semantic alias for championship / premium status — belt icons, CHAMPION badge fill. */
	--csds-state-perk: var(--csds-electric-purple); /* Semantic alias for a perk, buff, or rare ability tag. */
	--csds-link: var(--csds-ink); /* Body and inline link text. 14.2:1 on surface-base. Added 2026-09-18: the source named no link color, and NO red in this palette can carry small lin… */
	--csds-link-hover: var(--csds-gold); /* Hover and focus state for a link. 7.0:1 on surface-base. Gold is otherwise reserved for championships and premium systems; this is the one interact… */

	/* ---- Type families --------------------------------------------- */
	--csds-font-display: "Anton", "Arial Narrow", sans-serif;
	--csds-font-heading: "Oswald", "Arial Narrow", sans-serif;
	--csds-font-body: "Roboto Condensed", Arial, sans-serif;
	--csds-font-accent: "Road Rage", "Segoe Script", cursive;

	/* ---- Type · Display ------------------------------------------- */
	--csds-display-hero: 400 96px/0.92 var(--csds-font-display); /* Hero page titles, homepage wordmark, major promotional headlines. Uppercase. At most one per screen — see Visual Contrast Rule. */
	--csds-display-hero-size: 96px;
	--csds-display-hero-line-height: 0.92;
	--csds-display-hero-weight: 400;
	--csds-display-title: 400 56px/0.95 var(--csds-font-display); /* Large page titles and event names below hero scale. */
	--csds-display-title-size: 56px;
	--csds-display-title-line-height: 0.95;
	--csds-display-title-weight: 400;
	--csds-display-name: 400 34px/1 var(--csds-font-display); /* Wrestler name on profile headers and wrestler cards. Treat as a graphic element, not a text field. */
	--csds-display-name-size: 34px;
	--csds-display-name-line-height: 1;
	--csds-display-name-weight: 400;
	--csds-display-belt: 400 22px/1.05 var(--csds-font-display); /* Championship titles on belt panels and championship history rows. */
	--csds-display-belt-size: 22px;
	--csds-display-belt-line-height: 1.05;
	--csds-display-belt-weight: 400;

	/* ---- Type · Heading ------------------------------------------- */
	--csds-heading-section: 600 20px/1.3 var(--csds-font-heading); /* Section headers dividing a page into editorial bands (Overview, Roster, Championships…). */
	--csds-heading-section-size: 20px;
	--csds-heading-section-line-height: 1.3;
	--csds-heading-section-weight: 600;
	--csds-heading-card: 600 16px/1.3 var(--csds-font-heading); /* Card headings and panel titles inside a content area. */
	--csds-heading-card-size: 16px;
	--csds-heading-card-line-height: 1.3;
	--csds-heading-card-weight: 600;
	--csds-heading-nav: 600 14px/1.2 var(--csds-font-heading); /* Primary navigation links and tab labels. Apply uppercase in CSS; letter-spacing is baked into the style. */
	--csds-heading-nav-size: 14px;
	--csds-heading-nav-line-height: 1.2;
	--csds-heading-nav-weight: 600;
	--csds-heading-nav-letter-spacing: 0.04em;
	--csds-heading-topnav: 600 17px/1.2 var(--csds-font-heading); /* The site's top bar links only, sized against the logo as the top-bar mockup shows. Tabs keep heading-nav. Apply uppercase in CSS. */
	--csds-heading-topnav-size: 17px;
	--csds-heading-topnav-line-height: 1.2;
	--csds-heading-topnav-weight: 600;
	--csds-heading-topnav-letter-spacing: 0.04em;
	--csds-heading-label: 600 12px/1.2 var(--csds-font-heading); /* Small category labels and metadata tags above a heading. Apply uppercase in CSS; letter-spacing is baked into the style. */
	--csds-heading-label-size: 12px;
	--csds-heading-label-line-height: 1.2;
	--csds-heading-label-weight: 600;
	--csds-heading-label-letter-spacing: 0.06em;

	/* ---- Type · Body ---------------------------------------------- */
	--csds-body-lead: 400 17px/1.5 var(--csds-font-body); /* Lead paragraph copy on overview, lore and history pages. */
	--csds-body-lead-size: 17px;
	--csds-body-lead-line-height: 1.5;
	--csds-body-lead-weight: 400;
	--csds-body-default: 400 16px/1.5 var(--csds-font-body); /* Default body copy, descriptions, table cells and inline statistics. */
	--csds-body-default-size: 16px;
	--csds-body-default-line-height: 1.5;
	--csds-body-default-weight: 400;
	--csds-body-caption: 400 13px/1.4 var(--csds-font-body); /* Captions, timestamps, and secondary metadata under a heading or beside a value. */
	--csds-body-caption-size: 13px;
	--csds-body-caption-line-height: 1.4;
	--csds-body-caption-weight: 400;
	--csds-body-button: 700 14px/1 var(--csds-font-body); /* Button labels and compact interface controls. Apply uppercase in CSS; letter-spacing is baked into the style. */
	--csds-body-button-size: 14px;
	--csds-body-button-line-height: 1;
	--csds-body-button-weight: 700;
	--csds-body-button-letter-spacing: 0.03em;

	/* ---- Type · Accent -------------------------------------------- */
	--csds-accent-tagline: 400 40px/0.95 var(--csds-font-accent); /* Promotional taglines, event graphics and character slogans ONLY — never body text, navigation, statistics or dense UI. UNRESOLVED: no licensed br… */
	--csds-accent-tagline-size: 40px;
	--csds-accent-tagline-line-height: 0.95;
	--csds-accent-tagline-weight: 400;

	/* ---- Spacing — an 8px-leaning scale */
	--csds-space-1: 4px; /* Tightest gap — icon-to-label, chip inner padding. */
	--csds-space-2: 8px; /* Compact gap — stat row spacing, badge padding. */
	--csds-space-3: 12px; /* Card gap in a dense grid (12–18px range). */
	--csds-space-4: 16px; /* Card padding (16–24px range) and default component internal spacing. */
	--csds-space-5: 20px; /* Section spacing on compact pages (20–32px range). */
	--csds-space-6: 24px; /* Card padding at its upper bound; outer page margin at its lower bound (24–40px range). */
	--csds-space-7: 32px; /* Section spacing at its upper bound; spacing between major editorial bands. */
	--csds-space-8: 40px; /* Outer page margin at its upper bound on wide desktop layouts. */

	/* ---- Radius — minimal by design; nothing larger than 4px */
	--csds-radius-none: 0px; /* Panels, cards, and championship belts — the default. CyberSlam avoids excessive rounding. */
	--csds-radius-xs: 2px; /* Buttons, input fields, and tags where a corner needs to feel eased rather than sharp or pill-shaped. */
	--csds-radius-sm: 4px; /* Small badges and status chips only. Do not use on panels, cards, or buttons. */

	/* ---- Border widths */
	--csds-border-hairline: 1px; /* Standard panel border, paired with border-default (cream/graphite) or state colors. */
	--csds-border-thick: 2px; /* Double-line treatment for championship panels and other emphasized areas; also the active-tab top rule. */

	/* ---- Shadows — hard-edged. Never a soft or colored glow */
	--csds-shadow-panel-inset: inset 0 1px 2px 0 rgba(0,0,0,0.65); /* Slight inner shadow on standard panels — Section 13, UI Surface Design. Do not use soft outer glows. */
	--csds-shadow-offset: 2px 2px 0 0 rgba(0,0,0,0.8); /* Small hard offset shadow behind stamps, badges and the wrestler-card nameplate — never a soft blur. */

	/* ---- Motion — how drop-downs and panels slide. Honour prefers-reduced-motion */
	--csds-motion-duration: 180ms; /* How long a drop-down, panel or disclosure takes to slide open or shut. Short on purpose: the motion shows where a thing came from, it must never ma… */
	--csds-motion-ease: cubic-bezier(0.2, 0, 0, 1); /* The easing for every slide: fast out of the gate, settling at the end. Added 2026-09-22. */
	--csds-motion-slide: 8px; /* How far a drop-down travels as it opens — from its trigger, downward (or sideways for a flyout, upward for a phone bar panel). Added 2026-09-22. */
}