/*
 * Design tokens. The single place the design sets color, type and spacing.
 * theme.json points at these variables, so the block editor and the Cart and
 * Checkout blocks follow them too.
 *
 * The look (approved 2026-11-12, "Honey wash"): two colours, both from the hero photograph.
 * The page is a pale honey that carries the hero down the page; tiles, panels and the footer
 * are the lighter part. Cocoa is the one colour for buying; honey marks (top bar, added state).
 * Terracotta stays in the logo only. The page is never pure white.
 * Source: color-lab/palettes.css, palette "d".
 */

@font-face {
	font-family: "Bricolage Grotesque";
	src: url(../fonts/bricolage.woff2) format("woff2");
	font-weight: 400 800;
	font-display: swap;
}

@font-face {
	font-family: "Instrument Sans";
	src: url(../fonts/instrument-sans.woff2) format("woff2");
	font-weight: 400 700;
	font-display: swap;
}

@font-face {
	font-family: "Tumran Wordmark";
	src: url(../fonts/wordmark.woff2) format("woff2");
	font-display: swap;
}

:root {
	color-scheme: light;

	/*
	 * Honey scale, 50-950, built like a Tailwind v4 colour (OKLCH lightness ladder).
	 * 100, 200, 300, 700 and 950 are the site's original colours; the other
	 * steps sit between them and are kept for later use even where unused.
	 * 50 is the page's own honey one step lighter (same hue, close chroma), so tiles
	 * read as part of the page rather than a white patch.
	 */
	--color-honey-50: #fff5e3;  /* oklch(97.4% 0.030 84.2) */
	--color-honey-100: #fcefd6; /* oklch(95.6% 0.036 83.8) */
	--color-honey-200: #f6e2bd; /* oklch(92.0% 0.053 82.9) */
	--color-honey-300: #f9c15f; /* oklch(84.3% 0.131 79.3) */
	--color-honey-400: #e29f32; /* oklch(75.0% 0.142 74.5) */
	--color-honey-500: #d88e1a; /* oklch(70.5% 0.146 70.5) */
	--color-honey-600: #c67a10; /* oklch(64.6% 0.140 66.0) */
	--color-honey-700: #b0660f; /* oklch(58.1% 0.129 61.7) */
	--color-honey-800: #844a19; /* oklch(47.0% 0.100 56.0) */
	--color-honey-900: #6a3d21; /* oklch(40.8% 0.075 51.0) */
	--color-honey-950: #2f1a10; /* oklch(24.3% 0.038 45.9) */

	/* Roles. Everything below points at the honey scale where it can. */
	--color-bg: var(--color-honey-100);
	--color-surface: var(--color-honey-50);
	--color-text: var(--color-honey-950);
	--color-muted: #6b5446;
	--color-soft: color-mix(in srgb, var(--color-honey-950) 72%, transparent);
	--color-border: color-mix(in srgb, var(--color-honey-950) 14%, transparent);
	--color-accent: var(--color-honey-950);
	--color-accent-contrast: #ffffff;
	--color-brand-brown: #473527;
	--color-brand-terracotta: #d54624;
	--color-highlight: var(--color-honey-300);
	--color-icon: var(--color-honey-700);
	--color-hero: #e9a45a; /* the hero's own colour; may be richer than the scale */
	--color-shadow: var(--color-honey-950);
	--color-focus: #1b5fb8;
	--color-error: #b3261e;
	--color-success: #1b6b34;
	--color-backdrop: color-mix(in srgb, var(--color-honey-950) 40%, transparent);

	/* Type */
	--font-body: "Instrument Sans", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
	--font-display: "Bricolage Grotesque", "Segoe UI", sans-serif;
	--font-wordmark: "Tumran Wordmark", Georgia, serif;
	--text-sm: 0.875rem;
	--text-md: 1rem;
	--text-lg: 1.25rem;
	--text-xl: 1.75rem;
	--text-2xl: clamp(2rem, 6vw, 3.25rem);
	--leading-tight: 1.1;
	--leading-body: 1.45;

	/* Spacing: one scale. Every padding, margin and gap on the site is a step of it;
	   the only raw lengths left in the stylesheets are hairlines and the sizes of things. */
	--space-0: 0.125rem; /*  2px */
	--space-1: 0.25rem;  /*  4px */
	--space-2: 0.5rem;   /*  8px */
	--space-3: 0.75rem;  /* 12px */
	--space-4: 1rem;     /* 16px */
	--space-5: 1.5rem;   /* 24px */
	--space-6: 2rem;     /* 32px */
	--space-7: 3rem;     /* 48px */
	--space-8: 4rem;     /* 64px */
	--space-9: 6rem;     /* 96px */

	/* Rhythm: the distances that repeat on every page, phone value first. Set them here,
	   never in a page's own stylesheet, so every page keeps the same measure.
	   gutter         page edge to content                     16 to 32
	   space-section  one section to the next                  48 to 96
	   space-head     a section's heading to its content       16 to 32
	   space-top      the header to the first thing on a page  24 to 48
	   space-split    two columns set side by side             32 to 64
	   grid-gap       between tiles in a grid or a rail        12 to 24
	   pad-tile       inside a tile or small card              16 to 24
	   pad-panel      inside a large panel                     24 to 48 */
	--gutter: clamp(var(--space-4), 4vw, var(--space-6));
	--space-section: clamp(var(--space-7), 7vw, var(--space-9));
	--space-head: clamp(var(--space-4), 2.5vw, var(--space-6));
	--space-top: clamp(var(--space-5), 3vw, var(--space-7));
	--space-split: clamp(var(--space-6), 4vw, var(--space-8));
	--grid-gap: clamp(var(--space-3), 1.9vw, var(--space-5));
	--pad-tile: clamp(var(--space-4), 2.2vw, var(--space-5));
	--pad-panel: clamp(var(--space-5), 4vw, var(--space-7));

	/* Layout and shape. Every section shares one width, whatever the window's height; the hero
	   alone trims its own height on short windows (home.css). Breakpoints, used everywhere:
	   up to 719px is a phone, from 900px columns sit side by side. */
	--layout-content: 44rem;
	--layout-wide: 1280px;
	--drawer-width: 26rem;
	--tap-target: 2.75rem;
	/* Corners: one scale, chosen by the size of the thing. Nothing sets a radius outside it.
	   xs   marks inside a control: checkboxes, small chips, focus rings on plain links
	   sm   fields and small pictures: inputs, selects, option rows, notices, thumbnails
	   md   tiles and boxes: product tiles, gallery picture, panels, the order summary
	   lg   page-wide sections: hero, Good to know, footer
	   pill anything pressed: buttons, steppers, nav links, counts */
	--radius-xs: 6px;
	--radius-sm: 10px;
	--radius-md: clamp(14px, 1.4vw, 20px);
	--radius-lg: clamp(20px, 2.4vw, 32px);
	--radius-pill: 999px;
	--border: 1px solid var(--color-border);
	/* Keeps light surfaces apart from the honey page on washed-out screens, where the two nearly meet. */
	--surface-ring: inset 0 0 0 1px color-mix(in srgb, var(--color-shadow) 7%, transparent);
	--shadow-drawer: 0 0 2rem color-mix(in srgb, var(--color-shadow) 25%, transparent);
	--duration: 200ms;
	--fade: 900ms;
	--header-height: 68px;
	--bar-height: 36px;
}

@media (max-width: 719px) {
	:root {
		--header-height: 60px;
	}
}