/* ==========================================================================
   Damn Angry — design tokens
   Dark-first. Light mode via <html data-theme="light"> (toggle persists).
   ========================================================================== */

@font-face {
	font-family: "Anton";
	src: url("../fonts/anton-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin-var.woff2") format("woff2");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Permanent Marker";
	src: url("../fonts/permanent-marker-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	color-scheme: dark;

	/* Brand */
	--da-red: #e3242b;
	--da-red-hot: #ff3b30;
	--da-red-ink: #fff;
	--da-red-soft: rgb(227 36 43 / 0.14);

	/* Surfaces */
	--da-bg: #0b0b0e;
	--da-surface-1: #141418;
	--da-surface-2: #1c1c22;
	--da-surface-3: #26262e;
	--da-border: #2a2a33;
	--da-border-strong: #3a3a45;
	--da-overlay: rgb(5 5 8 / 0.72);
	--da-glass: rgb(20 20 24 / 0.62);

	/* Text */
	--da-text: #f4f4f6;
	--da-text-2: #a6a6b0;
	--da-text-3: #77777f;

	/* Status */
	--da-even: #22c55e;
	--da-even-soft: rgb(34 197 94 / 0.14);
	--da-amber: #f59e0b;
	--da-amber-soft: rgb(245 158 11 / 0.14);
	--da-verified: #3b82f6;
	--da-verified-soft: rgb(59 130 246 / 0.14);

	/* Rage scale */
	--rage-1: #facc15;
	--rage-2: #fb923c;
	--rage-3: #f97316;
	--rage-4: #ef4444;
	--rage-5: #e3242b;

	/* Type */
	--font-display: "Anton", Impact, "Arial Narrow", sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-marker: "Permanent Marker", "Comic Sans MS", cursive;

	--fs-xs: 0.75rem;
	--fs-sm: 0.8125rem;
	--fs-md: 0.9375rem;
	--fs-lg: 1.0625rem;
	--fs-xl: 1.25rem;
	--fs-h2: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
	--fs-hero: clamp(2.75rem, 1.6rem + 4.6vw, 5.75rem);

	/* Space (4px base) */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-8: 32px;
	--sp-10: 40px;
	--sp-12: 48px;
	--sp-16: 64px;
	--gutter: clamp(16px, 2.4vw, 32px);

	/* Shape & depth */
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 18px;
	--r-xl: 24px;
	--r-pill: 999px;
	--shadow-1: none;
	--shadow-2: 0 10px 30px rgb(0 0 0 / 0.45);
	--ring: 0 0 0 2px var(--da-bg), 0 0 0 4px var(--da-red);

	/* Layout */
	--topbar-h: 64px;
	--rail-w: 240px;
	--rail-mini-w: 76px;
	--tabbar-h: 64px;
	--content-max: 1680px;

	/* Motion */
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--t-fast: 150ms;
	--t-med: 250ms;
}

:root[data-theme="light"] {
	color-scheme: light;
	--da-red: #d11a21;
	--da-red-hot: #e3242b;
	--da-red-soft: rgb(209 26 33 / 0.09);
	--da-bg: #f4f4f6;
	--da-surface-1: #ffffff;
	--da-surface-2: #f0f0f3;
	--da-surface-3: #e5e5ea;
	--da-border: #e1e1e6;
	--da-border-strong: #cfcfd6;
	--da-overlay: rgb(10 10 14 / 0.55);
	--da-glass: rgb(255 255 255 / 0.72);
	--da-text: #111114;
	--da-text-2: #55555f;
	--da-text-3: #7a7a84;
	--da-even: #16a34a;
	--da-even-soft: rgb(22 163 74 / 0.1);
	--da-amber: #b45309;
	--da-amber-soft: rgb(217 119 6 / 0.1);
	--da-verified: #2563eb;
	--da-verified-soft: rgb(37 99 235 / 0.1);
	--rage-1: #ca8a04;
	--shadow-1: 0 1px 2px rgb(16 16 24 / 0.06), 0 1px 3px rgb(16 16 24 / 0.05);
	--shadow-2: 0 12px 32px rgb(16 16 24 / 0.14);
}