/**
 * SDC Theme Primitives
 *
 * CSS custom properties that map Figma design tokens
 * to WordPress theme.json generated CSS variables
 *
 * @package SDC_Theme
 * @since 0.1.0
 */

/* ========================================
   COLOR PRIMITIVES
   These reference WP theme.json preset colors
   ======================================== */

:root {
	/* Brand Colors - mapped from theme.json */
	--color-primary: var(--wp--preset--color--primary);
	--color-secondary: var(--wp--preset--color--secondary);
	--color-tertiary: var(--wp--preset--color--tertiary);
	--color-accent: var(--wp--preset--color--accent);

	/* Neutral Colors */
	--color-base: var(--wp--preset--color--base);
	--color-contrast: var(--wp--preset--color--contrast);
	--color-muted: var(--wp--preset--color--muted);

	/* Semantic aliases for clarity */
	--color-white: var(--color-base);
	--color-black: var(--color-contrast);
	--color-red: var(--color-accent);
	--color-sound-blue: var(--color-primary);
	--color-medium-blue: var(--color-secondary);
	--color-dark-blue: var(--color-tertiary);
	--color-pale: var(--color-muted);

	/* Glassmorphism backgrounds */
	--color-glass: rgba(0, 0, 0, 0.45);
	--color-glass-light: rgba(255, 255, 255, 0.45);

	/* Form colors */
	--color-form-label: #f2f6f9;
}

/* ========================================
   SPACING PRIMITIVES
   ======================================== */

:root {
	/* Spacing scale - matching Figma gaps and paddings */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;
	--space-2xl: 40px;
	--space-3xl: 48px;
	--space-4xl: 56px;
	--space-5xl: 64px;
	--space-6xl: 72px;
	--space-7xl: 80px;
	--space-8xl: 160px;
	--space-9xl: 240px;

	/* Component-specific spacing */
	--button-gap: 4px;
	--button-gap-lg: 8px;
	--nav-gap: 16px;
	--nav-link-gap: 32px;
	--heading-icon-gap: 24px;

	/* Layout spacing */
	--site-padding: 40px;
}

/* ========================================
   BORDER RADIUS PRIMITIVES
   ======================================== */

:root {
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-2xl: 32px;
	--radius-full: 9999px;
}

/* ========================================
   TYPOGRAPHY SIZE PRIMITIVES
   ======================================== */

:root {
	/* Heading sizes from Figma */
	--text-h1: 79px;
	--text-h2: 44px;
	--text-h3: 33px;
	--text-h4: 25px;
	--text-h5: 19px;
	--text-h6: 19px;

	/* Body sizes */
	--text-body: 16px;
	--text-body-medium: 19px;
	--text-label: 16px;
	--text-code: 16px;
	--text-button: 20px;

	/* Button text sizes */
	--text-button-sm: 19px;
	--text-button-md: 25px;
	--text-button-lg: 33px;
}

/* ========================================
   LINE HEIGHT PRIMITIVES
   ======================================== */

:root {
	--leading-tight: 100%;
	--leading-snug: 110%;
	--leading-normal: 120%;
	--leading-relaxed: 140%;
	--leading-loose: 150%;
}

/* ========================================
   LETTER SPACING PRIMITIVES
   ======================================== */

:root {
	--tracking-tight: -0.01em;
	--tracking-normal: 0;
	--tracking-wide: 0.04em;
}

/* ========================================
   EFFECTS PRIMITIVES
   ======================================== */

:root {
	/* Glassmorphism */
	--backdrop-blur: blur(20px);

	/* Shadows from theme.json */
	--shadow-sm: var(--wp--preset--shadow--small);
	--shadow-md: var(--wp--preset--shadow--medium);
	--shadow-lg: var(--wp--preset--shadow--large);
}

/* ========================================
   COMPONENT TOKENS
   ======================================== */

:root {
	/* Overlays */
	--overlay-subtle: rgba(0, 0, 0, 0.1);
	--overlay-medium: rgba(0, 0, 0, 0.15);
	--overlay-strong: rgba(0, 0, 0, 0.35);

	/* Shadows */
	--shadow-tile: 0 8px 32px rgba(0, 0, 0, 0.15);

	/* Gradients */
	--gradient-faq-dark: linear-gradient(180deg, rgba(6, 30, 61, 1) 0%, rgba(1, 58, 99, 1) 100%);

	/* Layout */
	--container-xl: 1280px;
	--container-max: 1440px;
	--sidebar-width: 240px;
	--content-width: 400px;

	/* Component sizing */
	--bullet-size: 8px;
	--tile-height-sm: 320px;
	--tile-height-lg: 399px;

	/* Extra typography */
	--text-small: 14px;
	--leading-reading: 130%;
}