/**
 * Data's Kitchen — design tokens
 *
 * Every colour here is sampled from the logo, then adjusted only where the
 * literal value failed a WCAG contrast check. Measured ratios are noted so a
 * future edit does not silently break accessibility.
 *
 * No component may declare a raw colour. Consume these variables instead.
 */

:root {
	/* ------------------------------------------------------------------
	 * Brand colour
	 * The logo's orange is #ED6736. Against white that is only 3.18:1, so
	 * text-bearing surfaces use the deepened steps below.
	 * ---------------------------------------------------------------- */
	--dk-color-primary: #D4501C;          /* brand orange — fills, large text  */
	--dk-color-primary-strong: #B83E12;   /* 5.62:1 on white — buttons, hover  */
	--dk-color-primary-soft: #ED6736;     /* the literal logo orange — on dark */
	--dk-color-primary-tint: #FDEDE5;     /* wash behind highlighted blocks    */

	--dk-color-secondary: #9E3527;        /* 7.02:1 on white — deep brick      */
	--dk-color-secondary-soft: #B84536;   /* the logo's brick                  */

	--dk-color-accent: #0E7A46;           /* 5.40:1 on white — usable green    */
	--dk-color-accent-bright: #35FD9A;    /* the logo's mint — on dark only    */

	/* ------------------------------------------------------------------
	 * Neutrals — warm, never grey. Derived from the logo's off-white.
	 * ---------------------------------------------------------------- */
	--dk-color-bg: #FFFBF7;               /* page ground                       */
	--dk-color-bg-sunk: #FBF2EA;          /* alternating section bands         */
	--dk-color-surface: #FFFFFF;          /* cards, sheets                     */
	--dk-color-ink: #241310;              /* 17.35:1 on bg — body text         */
	--dk-color-ink-soft: #4A322B;         /* secondary headings                */
	--dk-color-muted: #6B564F;            /* 6.64:1 on bg — supporting copy    */
	--dk-color-border: #EADCD2;
	--dk-color-border-strong: #D9C4B6;

	/* Inverted surfaces (footer, dark CTAs) */
	--dk-color-inverse-bg: #241310;
	--dk-color-inverse-ink: #FFFBF7;
	--dk-color-inverse-muted: #C4AA9E;

	/* ------------------------------------------------------------------
	 * Status
	 * ---------------------------------------------------------------- */
	--dk-color-success: #15803D;
	--dk-color-success-tint: #E8F6ED;
	--dk-color-warning: #B45309;
	--dk-color-warning-tint: #FDF3E5;
	--dk-color-error: #B3261E;
	--dk-color-error-tint: #FCEDEC;

	/* ------------------------------------------------------------------
	 * Typography
	 * Fraunces carries the brand voice; Inter does the reading work.
	 * ---------------------------------------------------------------- */
	--dk-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--dk-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Fluid scale, 320px → 1280px viewport */
	--dk-text-xs: 0.75rem;
	--dk-text-sm: 0.875rem;
	--dk-text-base: 1rem;
	--dk-text-lg: clamp(1.0625rem, 0.25vw + 1rem, 1.125rem);
	--dk-text-xl: clamp(1.1875rem, 0.5vw + 1.06rem, 1.375rem);
	--dk-text-2xl: clamp(1.375rem, 1vw + 1.13rem, 1.75rem);
	--dk-text-3xl: clamp(1.625rem, 1.8vw + 1.2rem, 2.25rem);
	--dk-text-4xl: clamp(2rem, 3vw + 1.25rem, 3rem);
	--dk-text-5xl: clamp(2.375rem, 4.5vw + 1.3rem, 4rem);

	--dk-leading-tight: 1.1;
	--dk-leading-snug: 1.25;
	--dk-leading-normal: 1.6;
	--dk-leading-relaxed: 1.75;

	--dk-tracking-tight: -0.02em;
	--dk-tracking-wide: 0.08em;

	/* ------------------------------------------------------------------
	 * Space — 4px base
	 * ---------------------------------------------------------------- */
	--dk-space-1: 0.25rem;
	--dk-space-2: 0.5rem;
	--dk-space-3: 0.75rem;
	--dk-space-4: 1rem;
	--dk-space-5: 1.5rem;
	--dk-space-6: 2rem;
	--dk-space-7: 3rem;
	--dk-space-8: 4rem;
	--dk-space-9: 6rem;
	--dk-space-10: 8rem;

	/* Vertical rhythm between page sections */
	--dk-section-y: clamp(3rem, 7vw, 6.5rem);

	/* ------------------------------------------------------------------
	 * Shape — echoes the logo's rounded-square badge
	 * ---------------------------------------------------------------- */
	--dk-radius-sm: 0.5rem;
	--dk-radius: 0.875rem;
	--dk-radius-lg: 1.25rem;
	--dk-radius-xl: 1.75rem;
	--dk-radius-pill: 999px;

	/* Warm-tinted shadows. A neutral grey shadow reads cold against cream. */
	--dk-shadow-sm: 0 1px 2px rgba(36, 19, 16, 0.06), 0 1px 3px rgba(36, 19, 16, 0.05);
	--dk-shadow: 0 2px 4px rgba(36, 19, 16, 0.05), 0 6px 16px rgba(36, 19, 16, 0.08);
	--dk-shadow-lg: 0 4px 8px rgba(36, 19, 16, 0.05), 0 16px 36px rgba(36, 19, 16, 0.12);
	--dk-shadow-primary: 0 6px 20px rgba(212, 80, 28, 0.28);

	/* ------------------------------------------------------------------
	 * Layout
	 * ---------------------------------------------------------------- */
	--dk-container: 78rem;
	--dk-container-narrow: 46rem;
	--dk-gutter: clamp(1rem, 4vw, 2.5rem);
	--dk-header-h: 4.5rem;

	/* ------------------------------------------------------------------
	 * Motion — communicates quality, never distracts
	 * ---------------------------------------------------------------- */
	--dk-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
	--dk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dk-duration-fast: 140ms;
	--dk-duration: 240ms;
	--dk-duration-slow: 420ms;

	--dk-z-header: 100;
	--dk-z-drawer: 200;
	--dk-z-modal: 300;
	--dk-z-toast: 400;
}

@media (min-width: 48em) {
	:root {
		--dk-header-h: 5.25rem;
	}
}

/* Anyone who asks for less motion gets none of the decorative kind. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--dk-duration-fast: 1ms;
		--dk-duration: 1ms;
		--dk-duration-slow: 1ms;
	}

	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
}