/**
 * Design tokens — Karataki visual system.
 * Values sourced from docs/design-reference/*.dc.html (approved spec) for
 * the dark palette; the light palette (Phase 6.4) is a new warm-ivory
 * editorial direction using the same semantic roles.
 * Every color/spacing/type value used across templates should route
 * through one of these custom properties rather than a literal.
 *
 * THEME MODEL
 * :root holds the LIGHT palette as the default (no attribute needed —
 * this is the correct fallback if the theme-init script in header.php
 * never runs, e.g. JS disabled). html[data-theme="dark"] overrides the
 * same color roles with the original approved near-black/ivory/gold
 * palette. Non-color tokens (type scale, spacing, motion) are theme-
 * invariant and declared once in :root only.
 *
 * FIXED (theme-invariant) color tokens below are a separate, deliberate
 * category: components that are always "light island" or "dark chip"
 * regardless of the active page theme (e.g. .k-section--light, the
 * product-image placeholder frame, .k-btn--dark). They intentionally do
 * NOT flip with data-theme — see base/components.css for where they're
 * used and why.
 */

:root {
	/* Color — core (LIGHT default: warm ivory editorial) */
	--k-color-bg: #F7F3EA;
	--k-color-bg-raised: #FFFFFF;
	--k-color-bg-surface: #F0EAD9;
	--k-color-text: #1C1A16;
	--k-color-accent: #9C7A3E;

	/* Color — muted text, lightest to darkest role (footer/faint meta is
	   the loosest-contrast tier by design, same as the dark palette). */
	--k-color-muted-1: #57503F; /* body copy on light */
	--k-color-muted-2: #6E6555; /* labels / eyebrow text */
	--k-color-muted-3: #8B8271; /* footer / faint meta */

	/* Color — fixed light surfaces (product imagery placeholders). These
	   are intentionally theme-invariant: product photography sits on a
	   constant neutral frame regardless of site theme. See
	   base/components.css / components/product-card.css for usage. */
	--k-color-surface-light: #F2EDE3;
	--k-color-surface-light-alt: #E6DFD2;

	/* Color — fixed-dark ink, used only by components that stay a "dark
	   chip" or need dark text on the fixed light surfaces above,
	   independent of the active theme (.k-section--light, .k-btn--dark). */
	--k-color-fixed-ink: #0A0A09;
	/* Fixed muted tone for text inside a fixed-light island (e.g.
	   .k-section--light .k-label) — same value in both themes, unlike
	   --k-color-muted-3 which reacts to the page theme. */
	--k-color-fixed-muted: #6E675C;

	/* Fixed-ink at reduced opacity — border/fill tints for the same
	   theme-invariant components above (.k-section--light .k-btn--outline,
	   .k-btn--dark). Extracted from literal rgba(10, 10, 9, X) so the base
	   color has one source of truth; same value in both themes. */
	--k-color-fixed-ink-a40: rgba(10, 10, 9, 0.4);
	--k-color-fixed-ink-a72: rgba(10, 10, 9, 0.72);

	/* Fixed-LIGHT ink — the inverse of --k-color-fixed-ink above: always-
	   ivory text/border for a component that sits on a fixed-dark surface
	   regardless of the active page theme. The hero is the motivating case
	   (a dark photo + scrim, same in both themes) — its heading/eyebrow/
	   support copy and the transparent-over-hero header must not flip to
	   near-black text once light mode's --k-color-text does. Same value as
	   dark mode's own --k-color-text/--k-color-muted-1/--k-border-cta, just
	   theme-invariant here. */
	--k-color-fixed-ink-light: #F2EDE3;
	--k-color-fixed-muted-light: #C9C3B8;
	--k-color-fixed-ink-light-a50: rgba(242, 237, 227, 0.5);

	/* Semantic alias: the readable text color on top of a solid --k-color-accent
	   fill (see .k-btn--fill:hover, single_add_to_cart_button:hover). Kept as
	   an alias rather than its own literal so it can never drift from --k-color-bg. */
	--k-color-accent-contrast: var(--k-color-bg);

	/* Status color — constant across themes; only used for checkout
	   validation states, both small/short text and border accents. */
	--k-color-danger: #C97B63;

	/* Editorial island/surface contrast (Phase 6.4.1) — background for a
	   fixed-light editorial section (.k-section--light: Discover, House)
	   against the surrounding page. Theme-reactive, unlike
	   --k-color-surface-light (which those same sections also use for
	   product-image placeholder frames and must stay constant for). In
	   light mode the page background is already warm ivory, so the
	   island needs its own slightly deeper warm cream/beige to read as
	   distinct; in dark mode it's set equal to --k-color-surface-light's
	   value so the existing approved dark appearance is pixel-identical. */
	--k-color-editorial-surface: #EFE6D4;

	/* Theme-reactive utility fills */
	--k-color-hover-tint: rgba(28, 26, 22, 0.06);
	--k-color-disabled-surface: rgba(28, 26, 22, 0.15);

	/* Borders / hairlines */
	--k-border-hairline: rgba(28, 26, 22, 0.12);
	--k-border-hairline-strong: rgba(28, 26, 22, 0.18);
	--k-border-cta: rgba(28, 26, 22, 0.5);
	--k-border-emphasis: rgba(28, 26, 22, 0.4);

	/* Constant modal/sheet scrims — dimming behind a drawer/sheet is
	   always dark regardless of page theme. */
	--k-overlay-scrim: rgba(10, 10, 9, 0.6);
	--k-overlay-scrim-soft: rgba(10, 10, 9, 0.55);

	/* Typography */
	--k-font-serif: 'Instrument Serif', Didot, Georgia, serif;
	--k-font-sans: Archivo, Helvetica, Arial, sans-serif;

	/* Fluid type scale (clamp() reproductions from design reference) */
	--k-text-hero: clamp(38px, 7.2vw, 146px);
	--k-text-display-lg: clamp(32px, 5.4vw, 88px);
	--k-text-display-md: clamp(30px, 4.4vw, 74px);
	--k-text-display-sm: clamp(26px, 3.2vw, 50px);
	--k-text-heading-lg: clamp(24px, 2.8vw, 40px);
	--k-text-heading-md: clamp(20px, 1.7vw, 27px);
	--k-text-eyebrow: 11px;
	--k-text-label: 10px;
	--k-text-body: 15px;
	--k-text-body-sm: 13px;

	/* Letter spacing conventions */
	--k-tracking-logo: .42em;
	--k-tracking-wordmark: .3em;
	--k-tracking-eyebrow: .22em;
	--k-tracking-label: .24em;
	--k-tracking-nav: .16em;

	/* Layout */
	--k-gutter: clamp(16px, 3vw, 40px);
	--k-header-height: 73px;
	--k-z-header: 80;
	--k-z-filter-bar: 40;
	--k-z-drawer: 100;
	--k-z-mega-menu: 60;

	/* Motion */
	--k-ease: cubic-bezier(.2, .7, .2, 1);
	--k-duration-fast: 200ms;
	--k-duration-base: 400ms;
	--k-duration-slow: 900ms;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--k-duration-fast: 1ms;
		--k-duration-base: 1ms;
		--k-duration-slow: 1ms;
	}
}

/* DARK — the original approved near-black/ivory/gold palette. Only the
   color roles are redeclared; type/spacing/motion tokens are shared. */
html[data-theme="dark"] {
	--k-color-bg: #0A0A09;
	--k-color-bg-raised: #141311;
	--k-color-bg-surface: #0F0E0C;
	--k-color-text: #F2EDE3;
	--k-color-accent: #C6A15B;

	--k-color-muted-1: #C9C3B8; /* body copy on dark */
	--k-color-muted-2: #8A8378; /* labels / eyebrow text */
	--k-color-muted-3: #6E675C; /* footer / faint meta */

	--k-color-danger: #C97B63;

	/* Same value as --k-color-surface-light — the approved dark-mode
	   island appearance is unchanged by this token's introduction. */
	--k-color-editorial-surface: #F2EDE3;

	--k-color-hover-tint: rgba(242, 237, 227, 0.06);
	--k-color-disabled-surface: rgba(242, 237, 227, 0.25);

	--k-border-hairline: rgba(242, 237, 227, 0.12);
	--k-border-hairline-strong: rgba(242, 237, 227, 0.18);
	--k-border-cta: rgba(242, 237, 227, 0.5);
	--k-border-emphasis: rgba(242, 237, 227, 0.4);
}