/**
 * Felix Theme — Base styles.
 *
 * Maps theme.json presets onto the --felix-* alias layer consumed by
 * every component, plus global reset and focus defaults.
 *
 * @package Felix_Theme
 */

/* -------------------------------------------------------------------------
   Design token aliases (single source of truth: theme.json presets)
   ------------------------------------------------------------------------- */

:root {
	--felix-color-primary:       var(--wp--preset--color--primary);
	--felix-color-secondary:     var(--wp--preset--color--secondary);
	--felix-color-accent:        var(--wp--preset--color--accent);
	--felix-color-accent-text:   var(--wp--preset--color--accent-text);
	--felix-color-background:    var(--wp--preset--color--background);
	--felix-color-surface:       var(--wp--preset--color--surface);
	--felix-color-text:          var(--wp--preset--color--text);
	--felix-color-supporting:    var(--wp--preset--color--supporting);
	--felix-color-border:        var(--wp--preset--color--border);
	--felix-color-border-strong: var(--wp--preset--color--border-strong);
	--felix-color-border-focus:  var(--wp--preset--color--border-focus);
	--felix-color-error:         var(--wp--preset--color--error);
	--felix-color-success:       var(--wp--preset--color--success);

	--felix-font-heading: var(--wp--preset--font-family--poppins);
	--felix-font-body:    var(--wp--preset--font-family--inter);

	--felix-sp-3xs: var(--wp--preset--spacing--felix-3xs);
	--felix-sp-2xs: var(--wp--preset--spacing--felix-2xs);
	--felix-sp-xs:  var(--wp--preset--spacing--felix-xs);
	--felix-sp-s:   var(--wp--preset--spacing--felix-sm);
	--felix-sp-m:   var(--wp--preset--spacing--felix-md);
	--felix-sp-l:   var(--wp--preset--spacing--felix-lg);
	--felix-sp-xl:  var(--wp--preset--spacing--felix-xl);

	--felix-radius-sm:   4px;
	--felix-radius-md:   8px;
	--felix-radius-lg:   12px;
	--felix-radius-pill: 999px;

	--felix-motion-fast: 200ms;
	--felix-motion-base: 300ms;
	--felix-motion-max:  500ms;
	--felix-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);

	--felix-content-width: 1200px;
	--felix-wide-width:    1280px;
	--felix-reading-width: 720px;
}

/* -------------------------------------------------------------------------
   Reset
   ------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	word-wrap: break-word;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 0 0 var(--felix-sp-s);
}

/* -------------------------------------------------------------------------
   Focus visibility (WCAG 2.2)
   ------------------------------------------------------------------------- */

:focus-visible {
	outline: 2px solid var(--felix-color-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* -------------------------------------------------------------------------
   Selection
   ------------------------------------------------------------------------- */

::selection {
	background: var(--felix-color-primary);
	color: var(--felix-color-surface);
}

/* -------------------------------------------------------------------------
   Navigation CTA (header)
   ------------------------------------------------------------------------- */

.felix-menu-cta,
.felix-menu-cta:focus-visible {
	background: var(--felix-color-primary);
	color: var(--felix-color-surface);
	border-radius: var(--felix-radius-md);
	padding: var(--felix-sp-2xs) var(--felix-sp-s);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--felix-sm);
	transition: background var(--felix-motion-fast) var(--felix-ease-out),
		color var(--felix-motion-fast) var(--felix-ease-out);
}

.felix-menu-cta:hover {
	background: var(--felix-color-text);
	color: var(--felix-color-surface);
}