/**
 * Peregrine for WordPress — design tokens layer.
 *
 * Defines the `--pk-*` custom property cascade and the dark-mode adjustments.
 * Loaded FIRST in the peregrine-base.* chain so every component/layout
 * stylesheet downstream can reference the tokens without ordering surprises.
 *
 * Each token has three fallback levels:
 *   1) Explicit override (--pk-X defined by the active theme or :root)
 *   2) WP preset from the active theme (if defined in theme.json)
 *   3) Safe default value (neutral, works on every theme)
 *
 * Everything lives in @layer peregrine-base → low priority → a theme can
 * override WITHOUT !important via its own CSS (natural cascade).
 *
 * @package Peregrine\WordPress
 */

@layer peregrine-base {

	:root {
		/* Semantic colors */
		--pk-accent:     var(--wp--preset--color--primary, #4f46e5);
		--pk-accent-on:  var(--wp--preset--color--background, #ffffff);
		--pk-text:       var(--wp--preset--color--foreground, currentColor);
		--pk-text-muted: var(--wp--preset--color--muted, rgba(0, 0, 0, 0.6));
		--pk-bg:         var(--wp--preset--color--background, #ffffff);
		--pk-surface:    rgba(0, 0, 0, 0.04);
		--pk-surface-2:  rgba(0, 0, 0, 0.08);
		--pk-border:     rgba(0, 0, 0, 0.12);

		/* Status colors (success / warning / error / info) */
		--pk-status-success: var(--wp--preset--color--success, #10b981);
		--pk-status-warning: var(--wp--preset--color--warning, #f59e0b);
		--pk-status-error:   var(--wp--preset--color--danger,  #dc2626);
		--pk-status-info:    var(--wp--preset--color--info,    #06b6d4);

		/* Savings badge (auto-computed for long cycles) */
		--pk-savings-bg:   var(--pk-status-success);
		--pk-savings-text: var(--pk-accent-on);

		/* Geometry */
		--pk-radius-sm: 0.375rem;
		--pk-radius:    0.75rem;
		--pk-radius-lg: 1rem;
		--pk-radius-pill: 9999px;

		/* Spacing (relies on WP presets if available) */
		--pk-space-1: var(--wp--preset--spacing--20, 0.5rem);
		--pk-space-2: var(--wp--preset--spacing--30, 1rem);
		--pk-space-3: var(--wp--preset--spacing--40, 1.5rem);
		--pk-space-4: var(--wp--preset--spacing--50, 2rem);
	}

	/* Auto-detect dark theme → adjusts --pk-surface, --pk-border */
	@media (prefers-color-scheme: dark) {
		:root {
			--pk-surface:   rgba(255, 255, 255, 0.04);
			--pk-surface-2: rgba(255, 255, 255, 0.08);
			--pk-border:    rgba(255, 255, 255, 0.12);
			--pk-text-muted: var(--wp--preset--color--muted, rgba(255, 255, 255, 0.6));
		}
	}

}