/* CatCredit — Design tokens (CSS custom properties + base reset). */

:root {
	/* Base */
	--bg: #FFFFFF;
	--bg-warm: #FFFBF0;
	--bg-dim: #F7F5EF;
	--ink: #0A0A0A;
	--ink-2: #2A2826;
	--ink-3: #5A574F;
	--ink-4: #8A8576;
	--line: rgba(10, 10, 10, 0.08);
	--line-2: rgba(10, 10, 10, 0.14);

	/* Brand */
	--yellow: #FFD23F;
	--yellow-soft: #FFE8A3;
	--yellow-tint: #FFF6D6;
	--orange: #FF6B35;
	--orange-soft: #FFD3C0;
	--green: #1F8A5B;

	/* Tokens */
	--radius-sm: 10px;
	--radius: 16px;
	--radius-lg: 24px;
	--radius-xl: 32px;

	--shadow-1: 0 1px 0 rgba(10,10,10,0.04), 0 8px 24px -12px rgba(10,10,10,0.10);
	--shadow-2: 0 1px 0 rgba(10,10,10,0.04), 0 24px 60px -24px rgba(10,10,10,0.18);
	--shadow-soft: 0 12px 40px -20px rgba(255, 107, 53, 0.35);

	--font-display: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif;
	--font-body: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

[data-theme="dark"] {
	--bg: #0E0D0B;
	--bg-warm: #15140F;
	--bg-dim: #1B1916;
	--ink: #FAF7EF;
	--ink-2: #E5E1D4;
	--ink-3: #B5AE9B;
	--ink-4: #7A7466;
	--line: rgba(250, 247, 239, 0.10);
	--line-2: rgba(250, 247, 239, 0.16);
	--yellow-tint: #2A2412;
	--yellow-soft: #4A3F18;
	--orange-soft: #4A2618;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "ss01", "cv11";
	letter-spacing: -0.005em;
}

button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

img, svg { display: block; max-width: 100%; }

.wrap {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}
@media (min-width: 768px) { .wrap { padding: 0 32px; } }
@media (min-width: 1100px) { .wrap { padding: 0 48px; } }

/* Density variants */
[data-density="compact"] section { padding: 40px 0; }
[data-density="spacious"] section { padding: 72px 0; }
@media (min-width: 768px) {
	[data-density="compact"] section { padding: 64px 0; }
	[data-density="spacious"] section { padding: 112px 0; }
}

/* Radius variants */
[data-radius="sharp"] { --radius-sm: 4px; --radius: 6px; --radius-lg: 10px; --radius-xl: 14px; }
[data-radius="soft"] { --radius-sm: 14px; --radius: 22px; --radius-lg: 32px; --radius-xl: 44px; }

/* Mascot density */
[data-mascot="minimal"] .coin { display: none; }
[data-mascot="minimal"] .cta-mascot { display: none; }
[data-mascot="none"] .coin { display: none; }
[data-mascot="none"] .hero-mascot { display: none; }
[data-mascot="none"] .cta-mascot { display: none; }
[data-mascot="none"] .hero-visual { display: none; }
[data-mascot="none"] .hero-grid { grid-template-columns: 1fr; }
[data-mascot="full"] .hero-visual { min-height: 380px; }

/* Hero alt layout */
[data-hero="centered"] .hero-grid { grid-template-columns: 1fr; text-align: center; }
[data-hero="centered"] .hero-grid > * { justify-self: center; }
[data-hero="centered"] .hero-meta, [data-hero="centered"] .amount-card { width: 100%; max-width: 540px; }
[data-hero="centered"] .hero-visual { order: -1; }
[data-hero="centered"] .lead { margin-left: auto; margin-right: auto; }
[data-hero="stacked"] .hero-grid { grid-template-columns: 1fr; }

/* Helpers */
.sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }