/**
 * Yoga Platform — design tokens ("Norfolk field studio", Section 3).
 * Single source of truth for color, type, spacing, and motion.
 * Loaded by both the public theme layer and the admin dashboard.
 */

:root {
	/* --- Color (toasted-earth studio palette — v4) --- */
	--color-ink: #33251F;
	--color-parchment: #F7F1E7;
	--color-moss: #4A382A;
	--color-sage-tint: #EADBCB;
	--color-clay: #9C5B45;       /* homepage clay — primary CTA */
	--color-brass: #9A704C;
	--color-brass-strong: #6D4B33;
	--color-error: #985044;
	--color-success: #76513C;
	--color-plum: #66506F;       /* restrained purple secondary */
	--color-chalk: #F7F1E7;
	--color-storm-pine: #4A382A;
	--color-sea-glass: #D8B9A2;
	--color-field-sage: #B88466;
	--color-heather: #66506F;

	/* Extended warm neutrals (mirror of theme tokens) */
	--color-walnut: #5B4030;
	--color-ink-soft: #5D4436;
	--color-ink-mute: #756254;
	--color-linen: #EDE1D3;
	--color-beige: #DCCABB;
	--color-taupe: #A99384;

	/* --- Typography (quirky-vintage editorial — matches the front end) --- */
	--font-display: "Fraunces", Georgia, serif;         /* wonky vintage serif: heroes, class names, titles */
	--font-body: "Karla", system-ui, sans-serif;        /* warm humanist sans: copy, labels, nav, buttons */
	--font-mono: "IBM Plex Mono", ui-monospace, monospace; /* Times, durations, credits, order numbers */

	/* Vintage extensions (mirror of theme tokens) */
	--color-sage: #A98068;
	--color-olive: #91705A;
	--color-mustard: #B48757;
	--color-peach: #D9AD95;
	--color-clay-warm: #B57256;
	--color-gold-light: #C9A77D;
	--color-paper: #FBF7EF;
	--color-vellum: #F1E7DA;

	/* Fluid type scale */
	--text-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
	--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--text-display: clamp(1.75rem, 1.4rem + 1.75vw, 3rem);
	--text-hero: clamp(2.5rem, 1.9rem + 3vw, 4.5rem);

	/* --- Spacing (fluid) --- */
	--space-2xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.375rem);
	--space-xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
	--space-sm: clamp(0.75rem, 0.68rem + 0.35vw, 1rem);
	--space-md: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
	--space-lg: clamp(1.5rem, 1.3rem + 1vw, 2.5rem);
	--space-xl: clamp(2.5rem, 2rem + 2.5vw, 5rem);

	/* --- Motion: breath-paced --- */
	--breath: 4s;                            /* Inhale/exhale loop for the signature line */
	--ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
	--dur-quick: 180ms;
	--dur-panel: 360ms;                      /* Slide-over / bottom-sheet */
	--stagger: 60ms;                         /* Scroll-reveal per-child offset */

	/* --- Focus (a11y, Section 3) --- */
	--focus-ring: 2px solid var(--color-clay);
	--focus-offset: 2px;
}

/* Every interactive element keeps a visible keyboard focus ring. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}

/* All animation respects reduced motion. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}