/*
 * Purpose: turii design system — the single source of truth for every token.
 *
 * The brand primitives (--gold, --sand, --brown …) are lifted verbatim from the
 * approved static build (assets/css/vendor/turii.css) so nothing drifts. On top
 * of them sits a semantic layer (--color-primary, --space-*, --text-*) that all
 * NEW theme components must use. Never hardcode a value in a component file —
 * add it here first.
 *
 * Load order: fonts.css → design-system.css → vendor/* → components/* → pages/*
 * The vendor layer re-declares a handful of these primitives with identical
 * values; that is intentional so the vendor CSS stays drop-in replaceable.
 */

:root {

	/* ═══ BRAND PRIMITIVES ═══════════════════════════════════════
	   Raw palette. Do not reference these directly in components —
	   use the semantic tokens below. */
	--brand-espresso:  #241C15;   --brand-espresso-rgb: 36 28 21;
	--brand-brown:     #4E382B;   --brand-brown-rgb:    78 56 43;
	--brand-gold:      #C2A063;   --brand-gold-rgb:     194 160 99;
	--brand-gold-light:#E0CFA8;
	--brand-gold-deep: #A5834A;
	--brand-cream:     #F5EFE6;   --brand-cream-rgb:    245 239 230;
	--brand-sand:      #F8F5F0;

	/* ═══ VENDOR ALIASES ═════════════════════════════════════════
	   The static build's variable names. Kept so vendor/foundation.css,
	   vendor/custom.css and vendor/turii.css resolve identically. */
	--black:  var(--brand-espresso);   --black-rgb: 36 28 21;
	--white:  var(--brand-cream);      --white-rgb: 245 239 230;
	--grey:   var(--brand-gold);       --grey-rgb:  194 160 99;
	--gold:   var(--brand-gold);       --gold-rgb:  194 160 99;
	--gold2:  var(--brand-gold-light);
	--gold3:  var(--brand-gold-deep);
	--brown:  var(--brand-brown);      --brown-rgb: 78 56 43;
	--sand:   var(--brand-sand);

	/* ═══ SEMANTIC COLOR ═════════════════════════════════════════ */
	--color-primary:      var(--brand-gold);
	--color-primary-dark: var(--brand-gold-deep);
	--color-secondary:    var(--brand-brown);
	--color-accent:       var(--brand-gold-light);
	--color-bg:           var(--brand-espresso);
	--color-bg-alt:       var(--brand-brown);
	--color-surface:      var(--brand-sand);
	--color-text:         var(--brand-cream);
	--color-text-muted:   rgb(var(--brand-cream-rgb) / 0.7);
	--color-text-invert:  var(--brand-espresso);
	--color-border:       rgb(var(--brand-gold-rgb) / 0.35);
	--color-success:      #4E7A52;
	--color-warning:      #C08A2E;
	--color-error:        #A8443A;

	/* ═══ TYPOGRAPHY ═════════════════════════════════════════════
	   Families match the static build exactly. */
	--font-heading: 'Lora', Georgia, serif;
	--font-body:    'Jost', system-ui, -apple-system, sans-serif;
	--font-script:  'Nothing You Could Do', cursive;
	--font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Aliases used by the vendor layer */
	--main-font:  var(--font-body);
	--title-font: var(--font-heading);
	--write-font: var(--font-script);

	/* Fluid type. foundation.css drives display sizes off --rem and the
	   h1..h6 vars; these are for NEW components only. Each scales between
	   360px and 1920px viewport width. */
	--text-xs:   clamp(0.69rem, 0.66rem + 0.13vw, 0.75rem);
	--text-sm:   clamp(0.81rem, 0.78rem + 0.16vw, 0.875rem);
	--text-base: clamp(0.94rem, 0.90rem + 0.19vw, 1rem);
	--text-md:   clamp(1.00rem, 0.94rem + 0.32vw, 1.125rem);
	--text-lg:   clamp(1.06rem, 0.96rem + 0.51vw, 1.25rem);
	--text-xl:   clamp(1.25rem, 1.09rem + 0.80vw, 1.5rem);
	--text-2xl:  clamp(1.50rem, 1.18rem + 1.60vw, 2rem);
	--text-3xl:  clamp(1.75rem, 1.27rem + 2.40vw, 2.5rem);
	--text-4xl:  clamp(2.19rem, 1.34rem + 4.23vw, 3.5rem);
	--text-5xl:  clamp(2.81rem, 1.41rem + 7.05vw, 5rem);

	--leading-tight:  1.1;
	--leading-snug:   1.3;
	--leading-normal: 1.5;
	--leading-loose:  1.8;

	--tracking-tight:  -0.02em;
	--tracking-normal:  0.01em;
	--tracking-wide:    0.08em;

	--weight-light:    300;
	--weight-regular:  400;
	--weight-medium:   500;
	--weight-semibold: 600;
	--weight-bold:     700;

	/* ═══ SPACING ════════════════════════════════════════════════ */
	--space-1:  0.25rem;   --space-2:  0.5rem;
	--space-3:  0.75rem;   --space-4:  1rem;
	--space-5:  1.25rem;   --space-6:  1.5rem;
	--space-8:  2rem;      --space-10: 2.5rem;
	--space-12: 3rem;      --space-16: 4rem;
	--space-20: 5rem;      --space-24: 6rem;
	--space-32: 8rem;

	/* ═══ LAYOUT ═════════════════════════════════════════════════ */
	--container-sm:  640px;    --container-md:  768px;
	--container-lg:  1024px;   --container-xl:  1280px;
	--container-2xl: 1440px;   --container-max: 1920px;
	--grid-cols: 12;
	--grid-gap:  var(--space-6);

	/* ═══ BORDERS ════════════════════════════════════════════════ */
	--radius-sm: 2px;   --radius-md: 4px;
	--radius-lg: 8px;   --radius-xl: 16px;   --radius-full: 9999px;
	--border-thin:   1px solid var(--color-border);
	--border-normal: 2px solid var(--color-border);

	/* ═══ SHADOWS ════════════════════════════════════════════════
	   Tinted with the espresso base rather than pure black. */
	--shadow-sm: 0 1px 3px  rgb(var(--brand-espresso-rgb) / 0.12);
	--shadow-md: 0 4px 16px rgb(var(--brand-espresso-rgb) / 0.18);
	--shadow-lg: 0 8px 32px rgb(var(--brand-espresso-rgb) / 0.24);
	--shadow-xl: 0 20px 60px rgb(var(--brand-espresso-rgb) / 0.32);

	/* ═══ MOTION ═════════════════════════════════════════════════ */
	--ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
	--ease-in:     cubic-bezier(0.4, 0.0, 1, 1);
	--ease-inout:  cubic-bezier(0.4, 0.0, 0.2, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--duration-fast:   150ms;   --duration-base:   250ms;
	--duration-slow:   400ms;   --duration-slower: 700ms;

	/* ═══ Z-INDEX ════════════════════════════════════════════════
	   Matches the stacking the vendor layer already relies on. */
	--z-base: 0;        --z-raised:   10;
	--z-dropdown: 100;  --z-sticky:  200;
	--z-overlay:  300;  --z-modal:   400;   --z-toast: 500;
}

/* Focus ring — WCAG 2.1 AA. Never remove an outline without a replacement. */
:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

/* Skip link — first focusable element in <body>. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--z-toast);
	padding: var(--space-3) var(--space-5);
	background: var(--color-primary);
	color: var(--color-text-invert);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
}

.skip-link:focus {
	left: var(--space-4);
	top: var(--space-4);
}

/* Visually hidden but readable by assistive tech. */
.u-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}