/*
 * Mortarox OTserver: design tokens (single source for site, shop and community pages).
 * Official palette first; "derived" tokens are tints/shades of it, added only where the
 * official colors fail contrast (WCAG AA) for small text on dark backgrounds.
 */
:root {
	/* Official palette */
	--mx-black: #0B0B0F;          /* Preto principal: page background */
	--mx-red: #B5121B;            /* Vermelho principal: borders, primary buttons */
	--mx-red-bright: #E32636;     /* Vermelho brilhante: hover, glow, highlights */
	--mx-gray-dark: #1C1C24;      /* Cinza escuro: panels */
	--mx-silver: #C5C5C5;         /* Prata metálico: secondary text, metal details */
	--mx-white: #F5F5F5;          /* Branco: main text */

	/* Derived (documented in README) */
	--mx-red-deep: #6B0D13;       /* table headers / pressed states (white text 11:1) */
	--mx-red-text: #FF6B74;       /* links and red text: 7.1:1 on black, 6.1:1 on panels */
	--mx-gray-darker: #131319;    /* alternate rows / inset fields */
	--mx-gray-line: #2E2E38;      /* hairlines */
	--mx-silver-dim: #8F8F99;     /* muted text, captions: 6.1:1 on black, 5.3:1 on panels */
	--mx-success: #4CC38A;
	--mx-warning: #E8B04B;

	/* Semantic aliases */
	--mx-bg: var(--mx-black);
	--mx-surface: var(--mx-gray-dark);
	--mx-surface-inset: var(--mx-gray-darker);
	--mx-text: var(--mx-white);
	--mx-text-muted: var(--mx-silver);
	--mx-text-faint: var(--mx-silver-dim);
	--mx-accent: var(--mx-red);
	--mx-accent-hover: var(--mx-red-bright);
	--mx-link: var(--mx-red-text);
	--mx-border: var(--mx-gray-line);
	--mx-border-accent: rgba(181, 18, 27, 0.55);

	/* Typography */
	--mx-font-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
	--mx-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mx-text-xs: 0.75rem;
	--mx-text-sm: 0.875rem;
	--mx-text-md: 1rem;
	--mx-text-lg: 1.25rem;
	--mx-text-xl: 1.6rem;
	--mx-text-2xl: 2.2rem;
	--mx-tracking-display: 0.08em;

	/* Spacing / shape */
	--mx-space-1: 4px;
	--mx-space-2: 8px;
	--mx-space-3: 12px;
	--mx-space-4: 16px;
	--mx-space-5: 24px;
	--mx-space-6: 32px;
	--mx-space-7: 48px;
	--mx-radius: 4px;
	--mx-radius-lg: 8px;
	--mx-content-width: 1240px;

	/* Effects */
	--mx-shadow-panel: 0 10px 30px rgba(0, 0, 0, 0.55);
	--mx-glow-red: 0 0 18px rgba(227, 38, 54, 0.35);
	--mx-metal: linear-gradient(180deg, #e2e2e2 0%, #c5c5c5 45%, #8d8d93 100%);
	--mx-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--mx-duration: 180ms;
}