/**
 * Design Tokens & Custom Properties
 *
 * Grounded in the extracted design system of pajaretillo.com.
 * Strict, system-wide variables for typography, color spaces, and layout offsets.
 */

:root {
	/* Color Palette */
	--color-bg-canvas: #f7f5f0;       /* Grounding warm off-white/beige */
	--color-bg-card: #ffffff;         /* Pure white for isolated containers */
	--color-text-main: #474747;       /* Soft high-contrast charcoal gray */
	--color-text-muted: #b3b3b3;      /* Secondary grey for meta and footnotes */
	--color-border: #cccccc;          /* Light neutral border gray */
	--color-accent-primary: #94e8ab;  /* Primary mint/sage green */
	--color-accent-dark: #01755f;     /* Deep agritech forest green */
	--color-accent-rose: #f76d8d;     /* High-impact rose pink accent */

	/* Brand Palette Tokens */
	--color-brand-noche: #034035;       /* Signature Verde Noche header/brand green */
	--color-brand-hoja: #01755f;        /* Verde Hoja */
	--color-brand-agua: #94e8ab;        /* Verde Agua */
	--color-brand-sol: #ffd55c;         /* Amarillo Sol */
	--color-brand-tierra: #fa884b;      /* Naranja Tierra */
	--color-brand-cielo: #7cd6de;       /* Celeste Cielo */
	--color-brand-vacuno: #d3b880;      /* Dorado Vacuno */
	--color-brand-zulla: #f7637e;       /* Rosa Zulla */
	--color-brand-lirio: #c1b3ff;       /* Violeta Lirio */
	--color-brand-forest-dark: #022c25; /* Dark forest shade for menus & side-cart */
	--color-brand-pine-deep: #004d40;   /* Deep pine green for action buttons */

	/* Status & Badge Tokens */
	--color-stock-in-bg: #eefbf2;       /* Soft green stock badge background */
	--color-stock-in-text: #0e6231;     /* Deep green stock badge text */

	/* Typography Scale */
	--font-primary: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-heading: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Line Heights & Tracking */
	--lh-body: 1.875;
	--lh-heading: 1.375;
	--letter-spacing-body: 0.025rem;
	--letter-spacing-heading: 0.45rem;
	--letter-spacing-button: 0.25rem;

	/* Spacing & Layout Tokens */
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 1.5rem;
	--spacing-lg: 2rem;
	--spacing-xl: 3rem;
	--spacing-xxl: 4rem;

	/* Component Geometry */
	--radius-card: 1.5rem;
	--radius-button: 0.25rem;
	--transition-smooth: all 0.25s ease-in-out;
}