/* ============================================================
   Design Club — Design Tokens
   Ported 1:1 from tailwind.config.js
   ============================================================ */

:root {
	/* Brand palette */
	--dc-ink: #0a0a0a;
	--dc-off-white: #fafaf9;
	--dc-warm-white: #f5f5f4;
	--dc-line-gray: #e7e5e4;
	--dc-stone: #78716c;
	--dc-warm-stone: #57534e;
	--dc-terracotta: #c2410c;
	--dc-deep-terracotta: #9a3412;
	--dc-sand: #e7e5e4;
	--dc-charcoal: #1c1917;
	--dc-white: #ffffff;

	/* Functional aliases */
	--dc-background: var(--dc-off-white);
	--dc-foreground: var(--dc-ink);
	--dc-primary: var(--dc-terracotta);
	--dc-primary-hover: var(--dc-deep-terracotta);
	--dc-muted: var(--dc-stone);
	--dc-border: var(--dc-line-gray);

	/* Typography */
	--dc-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--dc-fw-light: 300;
	--dc-fw-regular: 400;
	--dc-fw-medium: 500;
	--dc-fw-semibold: 600;
	--dc-fw-bold: 700;

	/* Radii */
	--dc-radius-sm: 0.5rem;
	--dc-radius: 0.75rem;
	--dc-radius-lg: 1rem;
	--dc-radius-xl: 1.25rem;
	--dc-radius-2xl: 1rem;
	--dc-radius-full: 9999px;

	/* Shadows */
	--dc-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--dc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
	--dc-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);

	/* Layout */
	--dc-container: 1280px;

	/* Z-stack */
	--dc-z-header: 50;
	--dc-z-modal: 100;
}