/* ==========================================================================
   labelsaymine — Design tokens
   Warm, editorial, restrained. Tonal banding, warm ink, hairline-only hierarchy.
   Mirror colours/fonts in theme.json.
   ========================================================================== */

:root {
	/* -------- Tonal band palette (kills the flat wash) -------- */
	--c-bg:            #F5EFE6;   /* band A — base cream */
	--c-band-alt:      #EDE4D6;   /* band B — one step down */
	--c-band-deep:     #E8DECF;   /* band C — deepest (Vision) */
	--c-surface:       #EDE4D6;   /* cards, section blocks (== band B) */
	--c-surface-2:     #E8DECF;   /* alt sections, hover */
	--c-line:          #D9CFC0;   /* borders, hairlines */
	--c-line-soft:     #E2D8C7;   /* softer hairlines inside bands */

	/* -------- Ink -------- */
	--c-text:          #3A342E;   /* warm charcoal — never pure black */
	--c-text-muted:    #6E6459;   /* warm muted (body copy, captions) */
	--c-text-soft:     #8E8477;   /* softest text for eyebrows / meta */

	/* -------- Accents -------- */
	--c-accent:        #8B6F52;   /* taupe — links, buttons */
	--c-accent-strong: #6E5539;   /* mocha — hover, active */
	--c-sale:          #B5533C;   /* muted brick */
	--c-on-accent:     #FBF8F2;   /* text on accent buttons */

	/* -------- Dark footer -------- */
	--c-dark-bg:       #2A241F;   /* warm espresso */
	--c-dark-text:     #EDE4D6;   /* cream on dark */
	--c-dark-muted:    #A99C89;

	/* -------- Selection -------- */
	--c-selection-bg:  #E8DECF;
	--c-selection-fg:  #3A342E;

	/* -------- Typography -------- */
	--font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--font-body:    "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--fs-h1:    clamp(3rem, 6.5vw, 6rem);   /* larger + lighter per spec */
	--fs-h2:    clamp(2rem, 3.2vw, 3rem);
	--fs-h3:    1.375rem;
	--fs-body:  1rem;
	--fs-small: 0.8125rem;
	--fs-tiny:  0.75rem;
	--fs-eyebrow: 0.6875rem;                /* 11px */
	--fs-ui:    0.75rem;                    /* 12px UI labels */

	--lh-body:    1.7;                      /* airier body */
	--lh-tight:   1.15;
	--lh-heading: 1.25;
	--lh-display: 1.04;                     /* h1 */

	--tracking-eyebrow:   0.22em;
	--tracking-uppercase: 0.15em;
	--tracking-display:   -0.015em;

	/* -------- Spacing -------- */
	--s-0:  0;
	--s-1:  0.5rem;
	--s-2:  1rem;
	--s-3:  1.5rem;
	--s-4:  2rem;
	--s-5:  2.5rem;
	--s-6:  3rem;
	--s-8:  4rem;
	--s-10: 5rem;
	--s-12: 6rem;
	--s-16: 8rem;

	/* -------- Layout -------- */
	--container: 1360px;
	--container-narrow: 900px;
	--container-vision: 780px;
	--gutter: clamp(1rem, 4vw, 3rem);

	/* -------- Radius (kept subtle — never blobs) -------- */
	--r-sm: 3px;
	--r-md: 6px;
	--r-pill: 999px;

	/* -------- Shadow (used sparingly; never on cards) -------- */
	--shadow-hair: 0 1px 0 0 var(--c-line);
	--shadow-header: 0 1px 0 0 rgba(58, 52, 46, 0.06);

	/* -------- Motion — slow and editorial -------- */
	--ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-slow: cubic-bezier(0.2, 0.6, 0.2, 1);
	--ease-drawer: cubic-bezier(0.4, 0, 0.2, 1);
	--dur-fast: 200ms;
	--dur-1:    250ms;
	--dur-2:    350ms;
	--dur-3:    600ms;   /* card image scale */
	--dur-4:    800ms;   /* scroll reveals */

	/* -------- Layering -------- */
	--z-grain:    1;
	--z-header:   40;
	--z-mega:     50;
	--z-overlay:  90;
	--z-drawer:   100;
	--z-toast:    120;

	/* Header height reserved for sticky offsets */
	--header-h: 96px;
	--header-h-stuck: 72px;
	--announcement-h: 36px;
}

@media (max-width: 767px) {
	:root {
		--header-h: 64px;
		--header-h-stuck: 56px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0ms;
		--dur-1:    0ms;
		--dur-2:    0ms;
		--dur-3:    0ms;
		--dur-4:    0ms;
	}
}