/* =====================================================================
   Design tokens — single source of truth for colour
   ---------------------------------------------------------------------
   Every colour in the theme should resolve to something in this file.
   Nothing else should hard-code a hex value.

   Layer 1 (--dm-*) is the designer's Figma palette, transcribed verbatim.
   The names mirror the Figma variable names (bg/default/primary becomes
   --dm-bg-default-primary) so a value can be traced back to the board
   without a lookup table. Do not edit these to taste — they change only
   when the Figma library changes.

   Layer 2 aliases the theme's historic names onto layer 1, so existing
   `var(--color-forest)` call sites keep working and pick up the correct
   value without being touched. New work should use the layer 1 names.

   See docs/color-tokens.md for the audit of what the site used before
   this file existed, and which colours still have no token.

   Loaded first in inc/enqueue/global.php, ahead of every other sheet.
   ===================================================================== */

:root {
	/* ---- Layer 1: Figma palette ---------------------------------- */

	/* Background */
	--dm-bg-default-primary: #F3EDE2;
	--dm-bg-default-secondary: #EADFCC;
	--dm-bg-default-tertiary: #062D20;
	--dm-bg-default-white: #FFFFFF;

	--dm-bg-accent-yellow: #FAD609;
	--dm-bg-accent-red: #E12353;
	--dm-bg-accent-blue: #0471B9;
	--dm-bg-accent-orange: #FF8847;

	--dm-bg-success-primary: #11A159;
	--dm-bg-success-secondary: #EBF9F1;
	--dm-bg-warning-primary: #FFD95C;
	--dm-bg-warning-secondary: #FFFCF0;
	--dm-bg-error-primary: #E82517;
	--dm-bg-error-secondary: #FEF2F1;

	/* Foreground */
	--dm-fg-default-primary: #062D20;
	--dm-fg-default-secondary: #70695C;
	--dm-fg-default-white: #FFFFFF;
	--dm-fg-accent-yellow: #FCEE1D;

	--dm-fg-success-primary: #11A159;
	--dm-fg-success-secondary: #EBF9F1;
	--dm-fg-warning-primary: #FFD95C;
	--dm-fg-warning-secondary: #FFFCF0;
	--dm-fg-error-primary: #E82517;
	--dm-fg-error-secondary: #FEF2F1;

	/* Border. The Figma board gives the two "default" borders as a
	   percentage of black/white rather than a flat hex, so they stay as
	   rgba() here and keep working over any background. */
	--dm-border-default-dark: rgba(0, 0, 0, 0.15);
	--dm-border-default-dark-strong: #062D20;
	--dm-border-default-light: rgba(255, 255, 255, 0.15);
	--dm-border-default-light-strong: #FFFFFF;

	--dm-border-accent-yellow: #FAD609;
	--dm-border-accent-yellow-strong: rgba(250, 214, 9, 0.2);

	--dm-border-success-default: #EBF9F1;
	--dm-border-success-strong: #11A159;
	--dm-border-warning-default: #FFFCF0;
	--dm-border-warning-strong: #FFD95C;
	/* The board lists these a shade off their bg/error counterparts
	   (#FEF3F1 vs #FEF2F1, #E83A17 vs #E82517). Kept as drawn. */
	--dm-border-error-default: #FEF3F1;
	--dm-border-error-strong: #E83A17;

	/* ---- Layer 2: legacy theme names ----------------------------- */
	/* These were the theme's own palette before the Figma library
	   existed. They now resolve to the matching token so old call sites
	   need no edit. Prefer the --dm-* names in new code. */

	--color-forest: var(--dm-bg-default-tertiary);   /* was #062E21 */
	--color-cream: var(--dm-bg-default-primary);     /* was #F7F5F0 */
	--color-sand: var(--dm-bg-default-primary);      /* was #F8F0E8 */
	--color-beige-light: var(--dm-bg-default-primary);
	--color-beige-dark: var(--dm-bg-default-secondary); /* was #E4D7BF */
	--color-sun: var(--dm-fg-accent-yellow);
	--color-white: var(--dm-bg-default-white);

	/* Component sheets keep their own local names (--dmm-forest,
	   --dm-footer-ink, --post-ink and friends) but resolve them from the
	   tokens above rather than from a hex, so the value still lives here
	   and only here. Grep for "var(--dm-" in assets/css to find them. */

	/* ---- Layer 3: extended palette --------------------------------
	   Colours the site uses that are not on the Figma board. Named by
	   what they look like, kept at their exact values. If design adds one
	   to Figma, move it up into layer 1. See docs/color-tokens.md. */

	/* Greens */
	--dm-ext-forest-light: #014C33;     /* hovers, focus rings, CTA band */
	--dm-ext-forest-mid: #184233;       /* blog card placeholder gradient */
	--dm-ext-forest-soft: #1F5A44;      /* blog card placeholder gradient */
	--dm-ext-forest-deep: #062218;      /* dark green overlays and shadows */
	--dm-ext-deep-green: #0B3A2C;       /* village audio waveform */
	--dm-ext-pine: #234036;             /* village page text */
	--dm-ext-pine-grey: #2E3C33;        /* blog carousel excerpt */
	--dm-ext-blog-dark: #072223;        /* blog carousel ground */
	--dm-ext-agave: #4DB047;            /* agave accent, carousel dots */
	--dm-ext-leaf: #1E7846;             /* village audio visualiser bars */
	--dm-ext-badge-green: #2F9E5F;      /* "Best Seller" pill */
	--dm-ext-badge-emerald: #0E6B3F;    /* Events category badge */
	--dm-ext-teal: #428A76;             /* footer wave */
	--dm-ext-teal-light: #59B098;       /* footer wave */
	--dm-ext-mint: #A8D5BA;             /* agave highlight CTA text */

	/* Blues, reds, yellows */
	--dm-ext-badge-blue: #1F6FD0;       /* How to Drink category badge */
	--dm-ext-pill-blue: #2F6FE0;        /* cocktail card pill */
	--dm-ext-badge-indigo: #2F4BBD;     /* Video category badge */
	--dm-ext-badge-magenta: #E0417D;    /* History category badge */
	--dm-ext-badge-orange: #E2701E;     /* Sustainability category badge */
	--dm-ext-form-error: #B3261E;       /* newsletter form errors */
	--dm-ext-gold: #D8B24C;             /* village page accent */
	--dm-ext-yellow-bright: #FCEC03;    /* footer wave */
	--dm-ext-butter: #FCF8E3;           /* cocktail image placeholder */

	/* Neutrals */
	--dm-ext-cream-light: #F7F6F4;      /* footer + popup waves */
	--dm-ext-grey-pale: #F5F5F5;        /* tasting meter panels, compare + PDP */
	--dm-ext-greige-pale: #E8E1D4;      /* product tile bottle panel */
	--dm-ext-greige: #D8CDB9;           /* cocktail section panels */
	--dm-ext-stone: #CEC6B4;            /* mezcales listing panel */
	--dm-ext-greige-dark: #C9BFAB;      /* compare + product dividers */
	--dm-ext-taupe: #8D8373;            /* story timeline muted text */
	--dm-ext-grey-light: #D1D5DB;       /* product slider track */
	--dm-ext-grey: #8A8A8A;             /* achievements placeholder */
	--dm-ext-grey-dark: #505050;        /* cocktail slider loading skeletons */
	--dm-ext-slate: #6B7C79;            /* product form hint text */
	--dm-ext-slate-dark: #4A5F5C;       /* product form labels */
	--dm-ext-slate-grey: #4A5568;       /* carousel "of" counter */
	--dm-ext-gunmetal: #242E36;         /* X share icon, cocktail page */
	--dm-ext-charcoal: #1E1E1E;         /* dark panels */
	--dm-ext-charcoal-warm: #1A1918;    /* blog carousel gradient */
	--dm-ext-near-black: #111111;       /* cocktail filters, village text */
	--dm-ext-espresso: #110703;         /* warm dark photo overlays */
	--dm-ext-black-soft: #0B0B0B;       /* video panels, blog gradient */
	--dm-ext-black: #000000;            /* hero grounds, map fills */

	/* Tailwind "random-*" utilities in tailwind.css */
	--dm-ext-orange: #FF9900;
	--dm-ext-amber: #DEA500;
	--dm-ext-pink: #E6305D;
	--dm-ext-lime: #88DB23;
	--dm-ext-teal-deep: #008F7C;
}