/*
 * Raffle Engine design tokens.
 *
 * Generated by hand from assets/tokens/tokens.json, which is the source of
 * truth. P0 introduces no build step, so the plugin runs from a clean checkout
 * with nothing installed. tests/p0 compares every key and value in the two
 * files and fails if they drift.
 *
 * Section 10: one typeface with real range, tabular numerals mandatory, one
 * accent, a generous neutral scale, nothing else.
 */

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-latin-400.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-latin-500.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-latin-600.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-latin-700.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
}

:root {
	--rfl-color-neutral-0: #ffffff;
	--rfl-color-neutral-50: #fafaf9;
	--rfl-color-neutral-100: #f5f5f4;
	--rfl-color-neutral-200: #e7e5e4;
	--rfl-color-neutral-300: #d6d3d1;
	--rfl-color-neutral-400: #a8a29e;
	--rfl-color-neutral-500: #78716c;
	--rfl-color-neutral-600: #57534e;
	--rfl-color-neutral-700: #44403c;
	--rfl-color-neutral-800: #292524;
	--rfl-color-neutral-900: #1c1917;
	--rfl-color-neutral-950: #0c0a09;

	--rfl-color-accent-base: #0e7490;
	--rfl-color-accent-hover: #155e75;
	--rfl-color-accent-active: #164e63;
	--rfl-color-accent-fg: #ffffff;
	--rfl-color-accent-muted: #ecfeff;
	--rfl-color-accent-ring: rgba(14, 116, 144, 0.35);

	--rfl-color-state-success: #15803d;
	--rfl-color-state-success-muted: #f0fdf4;
	--rfl-color-state-warning: #b45309;
	--rfl-color-state-warning-muted: #fffbeb;
	--rfl-color-state-danger: #b91c1c;
	--rfl-color-state-danger-muted: #fef2f2;

	--rfl-color-surface-page: #ffffff;
	--rfl-color-surface-raised: #fafaf9;
	--rfl-color-surface-sunken: #f5f5f4;
	--rfl-color-surface-border: #e7e5e4;
	--rfl-color-surface-border-strong: #d6d3d1;

	--rfl-color-text-primary: #1c1917;
	--rfl-color-text-secondary: #44403c;
	--rfl-color-text-muted: #78716c;
	--rfl-color-text-inverse: #fafaf9;

	--rfl-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--rfl-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--rfl-weight-regular: 400;
	--rfl-weight-medium: 500;
	--rfl-weight-semibold: 600;
	--rfl-weight-bold: 700;

	--rfl-size-xs: 0.75rem;
	--rfl-size-sm: 0.875rem;
	--rfl-size-base: 1rem;
	--rfl-size-lg: 1.125rem;
	--rfl-size-xl: 1.25rem;
	--rfl-size-2xl: 1.5rem;
	--rfl-size-3xl: 2rem;
	--rfl-size-4xl: 2.5rem;
	--rfl-size-reveal: 4rem;

	--rfl-leading-tight: 1.15;
	--rfl-leading-snug: 1.3;
	--rfl-leading-normal: 1.5;
	--rfl-leading-relaxed: 1.65;

	--rfl-tracking-tight: -0.01em;
	--rfl-tracking-normal: 0em;
	--rfl-tracking-wide: 0.02em;

	--rfl-space-0: 0;
	--rfl-space-1: 0.25rem;
	--rfl-space-2: 0.5rem;
	--rfl-space-3: 0.75rem;
	--rfl-space-4: 1rem;
	--rfl-space-5: 1.25rem;
	--rfl-space-6: 1.5rem;
	--rfl-space-8: 2rem;
	--rfl-space-10: 2.5rem;
	--rfl-space-12: 3rem;
	--rfl-space-16: 4rem;
	--rfl-space-20: 5rem;
	--rfl-space-24: 6rem;

	--rfl-radius-sm: 0.25rem;
	--rfl-radius-md: 0.5rem;
	--rfl-radius-lg: 0.75rem;
	--rfl-radius-xl: 1rem;
	--rfl-radius-pill: 999px;

	--rfl-shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.06);
	--rfl-shadow-md: 0 2px 8px rgba(28, 25, 23, 0.08);
	--rfl-shadow-lg: 0 12px 32px rgba(28, 25, 23, 0.12);

	--rfl-motion-duration-fast: 120ms;
	--rfl-motion-duration-base: 200ms;
	--rfl-motion-duration-slow: 320ms;
	--rfl-motion-duration-reveal: 900ms;

	--rfl-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
	--rfl-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
	--rfl-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
	--rfl-motion-easing-reveal: cubic-bezier(0.16, 1, 0.3, 1);

	--rfl-layer-base: 0;
	--rfl-layer-sticky: 100;
	--rfl-layer-overlay: 800;
	--rfl-layer-modal: 900;
	--rfl-layer-toast: 1000;

	--rfl-table-row-tight: 2.25rem;
	--rfl-table-row-base: 2.75rem;
	--rfl-table-gutter: 0.75rem;

	--rfl-layout-container: 68rem;
	--rfl-layout-measure: 34rem;
	--rfl-layout-donor-max: 40rem;
}

/*
 * Tabular numerals are mandatory, not decorative. This product is numbers in
 * columns: a pool of integers, a currency column, a countdown. Proportional
 * figures make those jitter as they change.
 */
.rfl-nums,
.rfl-table td,
.rfl-money,
.rfl-countdown {
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
}

.rfl-money {
	font-family: var(--rfl-font-mono);
	text-align: right;
}

/*
 * Density matches purpose. The entries table is a data tool; the donor page is
 * a conversion surface. These two rules are the seam between them.
 */
.rfl-table {
	border-collapse: collapse;
	font-family: var(--rfl-font-sans);
	font-size: var(--rfl-size-sm);
	width: 100%;
}

.rfl-table td,
.rfl-table th {
	border-bottom: 1px solid var(--rfl-color-surface-border);
	height: var(--rfl-table-row-tight);
	padding: 0 var(--rfl-table-gutter);
	text-align: left;
}

.rfl-donor {
	color: var(--rfl-color-text-primary);
	font-family: var(--rfl-font-sans);
	font-size: var(--rfl-size-base);
	line-height: var(--rfl-leading-normal);
	margin-inline: auto;
	max-width: var(--rfl-layout-donor-max);
}

@media (prefers-reduced-motion: reduce) {
	.rfl-donor *,
	.rfl-reveal * {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}
}