/**
 * LOST+FOUND PH — Design Tokens
 * Warm editorial system: off-white canvas, warm beige surfaces, cream
 * contrast blocks, espresso-charcoal text and solid buttons, crimson
 * (from the logo) as the single action/accent colour.
 *
 * These are plain custom properties, independent of Blocksy's own
 * --theme-palette-color-* variables. components.css consumes these.
 * We additionally map the same values onto Blocksy's palette variables
 * below so parent-theme markup (buttons, links, headings, backgrounds
 * driven by Customizer options) re-skins automatically without the
 * merchant needing to touch the Customizer.
 */

:root {
	/* ---- Brand palette ---- */
	--lf-color-cream: #F6EBCB;        /* Primary — contrast blocks, badges, header */
	--lf-color-accent: #CC0610;       /* Accent (crimson, from the logo) — key accents, active states, hover */
	--lf-color-accent-hover: #A0040C;
	--lf-color-btn: #26211E;          /* Solid buttons — espresso, crimson on hover */
	--lf-color-price: #26211E;        /* Prices — bold espresso */
	--lf-color-nav-text: #1A1A1A;     /* Header menu links */
	--lf-color-nav-accent: #B80000;   /* Header menu hover/active — deep red from the logo */
	--lf-color-bg: #FAF7ED;           /* Background — main canvas, off-white */
	--lf-color-surface: #EFE2C2;      /* Secondary Surface — warm beige, cards/modals */
	--lf-color-text: #26211E;         /* Dark Text — espresso charcoal, headings & main copy */
	/* Secondary/meta text: not in the supplied palette — a lighter tint of
	   the charcoal so hierarchy still reads against the warm background. */
	--lf-color-text-secondary: #6B5F55;
	--lf-color-border: #E4D6AE;       /* derived — subtle divider between beige/off-white surfaces */

	/* Cream-surface variants (for inverted, high-contrast cards/header) */
	--lf-color-on-cream: #26211E;     /* text colour when sitting on cream */
	--lf-color-cream-border: #E3D6AC;

	/* ---- Typography ---- */
	--lf-font-heading: "Space Grotesk", "Outfit", "Poppins", sans-serif;
	--lf-font-body: "DM Sans", "Inter", sans-serif;
	--lf-heading-weight: 700;
	--lf-heading-weight-h4: 600;
	--lf-heading-tracking: -0.02em;
	--lf-body-line-height: 1.6;

	/* ---- Shape & elevation ---- */
	--lf-radius-sm: 8px;
	--lf-radius-md: 10px;
	--lf-radius-lg: 12px;
	--lf-border-width: 1px;
	--lf-shadow-soft: 0 4px 16px rgba(38, 33, 30, 0.12);
	--lf-shadow-lift: 0 8px 28px rgba(38, 33, 30, 0.18);

	/* ---- Motion ---- */
	--lf-transition-fast: 150ms ease;
	--lf-transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);

	/*
	 * ---- Blocksy palette bridge ----
	 * Blocksy generates --theme-palette-color-1 .. -8 from the
	 * "Global Color Palette" customizer control and drives most of its
	 * default component colors (links, headings, borders, backgrounds)
	 * from these eight variables. Re-declaring them here re-skins the
	 * parent theme's own markup without editing Blocksy's PHP.
	 *
	 * !important: Blocksy caches its generated palette vars in a
	 * transient that (in practice) doesn't reliably invalidate from
	 * PHP-side `set_theme_mod()` calls — only from an actual Customizer
	 * save. Rather than depend on that cache's timing, we just always
	 * win the cascade here. (functions.php still seeds the real
	 * Customizer control too, so Customize → Colors shows the right
	 * values if a merchant opens it.)
	 */
	--theme-palette-color-1: var(--lf-color-accent) !important;        /* accent / links */
	--theme-palette-color-2: var(--lf-color-accent-hover) !important;  /* accent hover */
	--theme-palette-color-3: var(--lf-color-text-secondary) !important; /* base text */
	--theme-palette-color-4: var(--lf-color-text) !important;           /* headings */
	--theme-palette-color-5: var(--lf-color-border) !important;         /* borders */
	--theme-palette-color-6: var(--lf-color-surface) !important;        /* alt background / cards */
	--theme-palette-color-7: var(--lf-color-bg) !important;             /* site background */
	--theme-palette-color-8: var(--lf-color-cream) !important;          /* inverted / contrast surfaces */
}