/**
 * Seyleniya Cinnamon - design tokens.
 *
 * THE ONLY FILE IN THE THEME PERMITTED TO CONTAIN RAW HEX VALUES.
 * Everywhere else, reference these custom properties. Blueprint §5 allows four
 * colors and no more; every shade below is one of those four at an opacity, not
 * a new hue.
 *
 * Mirrored in PHP by inc/palette.php - keep the two in sync.
 */

:root {
	/* ---------------------------------------------------------------
	 * 1. Brand palette (blueprint §5)
	 * ------------------------------------------------------------ */
	--sy-taupe: #9F7F66;
	--sy-cream: #F3E6D6;
	--sy-white: #FFFFFF;
	--sy-black: #000000;

	/* Channel triplets, so shades can be composed with rgb()/alpha
	 * without inventing new hex values. */
	--sy-taupe-rgb: 159, 127, 102;
	--sy-cream-rgb: 243, 230, 214;
	--sy-white-rgb: 255, 255, 255;
	--sy-black-rgb: 0, 0, 0;

	/* ---------------------------------------------------------------
	 * 1b. Dark mode values
	 *
	 * Not new hues: each is a mix of two of the four brand colours, computed
	 * once and written here as literals because CSS cannot derive an rgb()
	 * channel triplet from color-mix(), and every shade in section 2 needs
	 * those triplets.
	 *
	 *   ink       = cream, unchanged - it reads beautifully on near-black
	 *   base      = black 94% + cream  6%   a warm near-black, not a flat #000
	 *   raised    = black 88% + cream 12%   one step up, for cards
	 *   accent    = taupe 72% + cream 28%   lifted to clear AA on the base
	 *
	 * These are consumed by assets/css/dark.css, which reassigns the roles.
	 * ------------------------------------------------------------ */
	--sy-dark-base: #0F0E0D;
	--sy-dark-base-rgb: 15, 14, 13;
	--sy-dark-raised: #1D1C1A;
	--sy-dark-raised-rgb: 29, 28, 26;
	/*
	 * Derived from the accent, not fixed. It was a hard-coded taupe, so ANY
	 * chosen palette - Warm, Light, Mono, Custom or Golden - silently reverted
	 * to taupe the moment dark mode was switched on.
	 *
	 * Mixed with a literal white rather than var(--sy-white), because the
	 * surface role has no business deciding how far the accent lightens.
	 *
	 * At 76% the brand accent lands on #B69E8B against the #B79C85 it replaced
	 * - a shift of a few points per channel, and 7.39:1 on the dark ground
	 * rather than the 7.2:1 it had.
	 */
	--sy-dark-accent: color-mix(in srgb, var(--sy-taupe) 76%, #FFFFFF);
	--sy-dark-accent-rgb: 183, 156, 133;

	/* ---------------------------------------------------------------
	 * 2. Derived shades - taupe or black at opacity, never a fifth hue
	 * ------------------------------------------------------------ */
	--sy-taupe-12: rgba(var(--sy-taupe-rgb), 0.12);
	--sy-taupe-24: rgba(var(--sy-taupe-rgb), 0.24);
	--sy-taupe-40: rgba(var(--sy-taupe-rgb), 0.40);
	--sy-taupe-64: rgba(var(--sy-taupe-rgb), 0.64);
	--sy-taupe-88: rgba(var(--sy-taupe-rgb), 0.88);

	--sy-ink-04: rgba(var(--sy-black-rgb), 0.04);
	--sy-ink-08: rgba(var(--sy-black-rgb), 0.08);
	--sy-ink-16: rgba(var(--sy-black-rgb), 0.16);
	--sy-ink-40: rgba(var(--sy-black-rgb), 0.40);
	--sy-ink-64: rgba(var(--sy-black-rgb), 0.64);
	--sy-ink-80: rgba(var(--sy-black-rgb), 0.80);

	--sy-cream-56: rgba(var(--sy-cream-rgb), 0.56);
	--sy-white-64: rgba(var(--sy-white-rgb), 0.64);
	--sy-white-80: rgba(var(--sy-white-rgb), 0.80);

	/* A deepened taupe for text-on-taupe contrast. Black at 42% over taupe
	 * lands near #5C4A3B, which clears WCAG AA against cream and white.
	 * Used only where a taupe surface must carry small text. */
	--sy-taupe-deep: color-mix(in srgb, var(--sy-taupe) 58%, var(--sy-black));

	/* ---------------------------------------------------------------
	 * 3. Semantic roles
	 * ------------------------------------------------------------ */
	/* Section grounds, as roles rather than colours.
	 *
	 * The class names stay .sy-section--ground-cream / -white / -black because
	 * content and saved layouts refer to them, but what they resolve to is a
	 * role. That indirection is what lets dark mode remap the whole page
	 * without touching a single template. */
	--sy-ground-base: var(--sy-cream);
	--sy-ground-raised: var(--sy-white);
	--sy-ground-inverse: var(--sy-black);
	--sy-ground-inverse-text: var(--sy-cream);

	--sy-bg: var(--sy-cream);
	--sy-bg-contrast: var(--sy-white);
	--sy-text: var(--sy-black);
	--sy-text-muted: var(--sy-ink-64);
	--sy-text-inverse: var(--sy-white);
	--sy-accent: var(--sy-taupe);
	--sy-accent-strong: var(--sy-taupe-deep);
	--sy-rule: var(--sy-taupe-24);
	--sy-rule-strong: var(--sy-taupe-40);
	--sy-focus: var(--sy-black);

	/* ---------------------------------------------------------------
	 * 4. Typography (blueprint §6)
	 * ------------------------------------------------------------ */
	--sy-font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
	--sy-font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Fluid scale. Every step is clamped so the hero stays readable at 360px
	 * and never becomes unwieldy on a wide desktop (§6, §35). */
	--sy-text-xs: clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem);
	--sy-text-sm: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
	--sy-text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--sy-text-lg: clamp(1.125rem, 1.07rem + 0.28vw, 1.3125rem);
	--sy-text-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
	--sy-display-sm: clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem);
	--sy-display-md: clamp(2.125rem, 1.6rem + 2.6vw, 3.5rem);
	--sy-display-lg: clamp(2.5rem, 1.7rem + 4vw, 5rem);
	--sy-display-xl: clamp(2.875rem, 1.8rem + 5.4vw, 6.25rem);

	--sy-leading-tight: 1.04;
	--sy-leading-display: 1.1;
	--sy-leading-snug: 1.35;
	--sy-leading-body: 1.7;

	--sy-tracking-display: 0.01em;
	--sy-tracking-eyebrow: 0.22em;
	--sy-tracking-button: 0.1em;

	--sy-weight-regular: 400;
	--sy-weight-medium: 500;
	--sy-weight-semibold: 600;

	/* ---------------------------------------------------------------
	 * 5. Space - a 4px-derived scale
	 * ------------------------------------------------------------ */
	--sy-space-3xs: 0.25rem;
	--sy-space-2xs: 0.5rem;
	--sy-space-xs: 0.75rem;
	--sy-space-sm: 1rem;
	--sy-space-md: 1.5rem;
	--sy-space-lg: 2.25rem;
	--sy-space-xl: 3.5rem;
	--sy-space-2xl: 5rem;
	--sy-space-3xl: 7.5rem;

	/* Section rhythm. Generous whitespace is a brand requirement (§63), so
	 * vertical padding scales with the viewport rather than sitting fixed. */
	--sy-section-y: clamp(3.5rem, 2.2rem + 6vw, 8.5rem);
	--sy-section-y-tight: clamp(2.25rem, 1.6rem + 3vw, 4.5rem);

	/* ---------------------------------------------------------------
	 * 6. Layout
	 * ------------------------------------------------------------ */
	--sy-container: 76rem;
	--sy-container-narrow: 46rem;
	--sy-container-wide: 96rem;
	--sy-gutter: clamp(1.25rem, 0.9rem + 1.6vw, 3rem);
	--sy-grid-gap: clamp(1.5rem, 1rem + 2vw, 3rem);

	/* ---------------------------------------------------------------
	 * 7. Surface treatment
	 *
	 * The identity is line-led, not shadow-led (§33), so radii stay small
	 * and shadows stay almost invisible.
	 * ------------------------------------------------------------ */
	--sy-radius-none: 0;
	--sy-radius-sm: 2px;
	--sy-radius-md: 4px;
	--sy-radius-pill: 999px;
	--sy-border: 1px solid var(--sy-rule);
	--sy-border-strong: 1px solid var(--sy-rule-strong);
	--sy-shadow-soft: 0 1px 2px var(--sy-ink-04), 0 12px 32px -20px var(--sy-ink-16);
	--sy-shadow-lift: 0 2px 4px var(--sy-ink-04), 0 24px 48px -28px var(--sy-ink-16);

	/* ---------------------------------------------------------------
	 * 8. Motion (blueprint §34 - subtle only)
	 *
	 * These are overridden to 0s under prefers-reduced-motion in base.css,
	 * which switches off every transition in the theme at once.
	 * ------------------------------------------------------------ */
	--sy-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--sy-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--sy-duration-fast: 180ms;
	--sy-duration: 320ms;
	--sy-duration-slow: 720ms;
	--sy-reveal-distance: 18px;

	/* ---------------------------------------------------------------
	 * 9. Chrome
	 * ------------------------------------------------------------ */
	/* How far the sticky header sits from the top. Raised to clear the
	 * WordPress admin bar for logged-in users; see components.css. */
	--sy-sticky-top: 0px;
	--sy-header-height: 4.5rem;
	--sy-announcement-height: 2.5rem;
	--sy-z-announcement: 60;
	--sy-z-header: 70;
	--sy-z-menu: 80;
	--sy-z-skip: 100;
}

/*
 * Browsers without color-mix() fall back to plain taupe. It is a slightly
 * lighter accent than intended but never an off-brand hue.
 */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	:root {
		--sy-taupe-deep: var(--sy-taupe);
	}
}