/* theme/variables.css
 * Layer: tokens
 * Base spacing scale and size scale
 *
 * This file defines the foundational spacing scale used throughout the design system.
 * All spacing tokens (--pad-*, --marg-*, --gap-*) derive from these base values.
 *
 * Scale: 0.25rem (4px) increments following a 4px grid system
 */

@layer tokens {
	:root {
		/* ─── Spacing Scale (Gutter) ──
		 * Base spacing values in rem units with pixel equivalents
		 * Usage: gap: var(--gutter-md); or padding: var(--gutter-lg);
		 */
		--gutter-xs: 0.25rem;  /* 4px  - tight spacing, inline elements */
		--gutter-sm: 0.5rem;   /* 8px  - compact spacing, icon gaps */
		--gutter-md: 1rem;     /* 16px - default spacing, standard gaps */
		--gutter-lg: 1.5rem;   /* 24px - comfortable spacing, section gaps */
		--gutter-xl: 2rem;     /* 32px - generous spacing, layout sections */
		--gutter-2xl: 3rem;    /* 48px - large spacing, page sections */
		--gutter-3xl: 4rem;    /* 64px - maximum spacing, hero sections */


		/* ───── Default size scale ───── */
		--size-xs: 0.25rem;   /* 4px - extra small elements */
		--size-sm: 0.5rem;    /* 8px - small elements */
		--size-md: 1rem;      /* 16px - default size, standard elements */
		--size-lg: 1.5rem;    /* 24px - large size, large elements */
		--size-xl: 2rem;      /* 32px - extra large size, hero elements */
		--size-2xl: 3rem;     /* 48px - huge size, special elements */
		--size-3xl: 4rem;     /* 64px - maximum size, hero elements */
	}
}