/**
 * DHUKR design tokens.
 *
 * Source: Figma (desktop only, 1920 frame, 1440 container).
 * Every color, font size, spacing and radius used by block CSS must come from here.
 * Block CSS must not contain hardcoded design values.
 *
 * Fluid sizes use clamp(): the Figma value is reached at a 1440px viewport and
 * scales down linearly to the mobile value at 375px.
 *
 * Breakpoints cannot be custom properties (not allowed in media queries).
 * Use these values literally:
 *   desktop >= 1201px | tablet 769px-1200px | mobile <= 768px
 */

:root {

	/* ------------------------------------------------------------------
	 * Brand colors (raw palette)
	 * ------------------------------------------------------------------ */
	--dh-color-green-900: #1B2A18; /* dark green: headings, dark sections, header/footer */
	--dh-color-green-600: #57664F; /* field border, disabled button */
	--dh-color-orange-500: #E88219; /* accent: buttons, pre-titles, prices */
	--dh-color-cream-100: #F0EDE0; /* cream sections and cards */
	--dh-color-grey-600: #6E6E6E; /* body text, placeholders, inactive step */
	--dh-color-grey-400: #979797; /* muted text, dashed step connector */
	--dh-color-grey-200: #D9D9D9; /* card borders, dividers */
	--dh-color-white: #FFFFFF;

	/* ------------------------------------------------------------------
	 * Semantic colors (use these in block CSS, not the raw palette)
	 * ------------------------------------------------------------------ */
	--dh-color-bg: var(--dh-color-white);
	--dh-color-bg-alt: var(--dh-color-cream-100);
	--dh-color-bg-dark: var(--dh-color-green-900);

	--dh-color-heading: var(--dh-color-green-900);
	--dh-color-text: var(--dh-color-grey-600);
	--dh-color-text-muted: var(--dh-color-grey-400);
	--dh-color-text-on-dark: var(--dh-color-white);
	--dh-color-text-on-dark-muted: var(--dh-color-cream-100);

	/* Accent used for text (pre-titles, prices). Kept separate from the button
	 * accent so it can be darkened for contrast without touching buttons. */
	--dh-color-accent: var(--dh-color-orange-500);
	--dh-color-accent-text: var(--dh-color-orange-500);

	--dh-color-border: var(--dh-color-grey-200);
	--dh-color-border-field: var(--dh-color-green-600);
	--dh-color-divider-on-dark: var(--dh-color-grey-600);

	--dh-color-focus: var(--dh-color-green-900);
	--dh-color-focus-on-dark: var(--dh-color-cream-100);

	/* ------------------------------------------------------------------
	 * Overlays
	 * ------------------------------------------------------------------ */
	--dh-overlay-hero: rgba(0, 0, 0, 0.2);
	--dh-overlay-feature-bar: rgba(27, 42, 24, 0.85);
	--dh-overlay-cta: linear-gradient(180deg, rgba(85, 52, 19, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
	--dh-overlay-hover-on-dark: rgba(255, 255, 255, 0.06); /* hover row on dark backgrounds (not in Figma) */
	--dh-overlay-backdrop: rgba(0, 0, 0, 0.5);              /* behind drawers and modals (not in Figma) */

	/* ------------------------------------------------------------------
	 * Font families
	 * ------------------------------------------------------------------ */
	--dh-font-display: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
	--dh-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	/* Segoe Script is used only where installed (Windows); it is not hosted. */
	--dh-font-script: 'Segoe Script', 'Bradley Hand', 'Kalam', cursive;

	--dh-fw-regular: 400;
	--dh-fw-medium: 500;
	--dh-fw-semibold: 600;
	--dh-fw-bold: 700;

	/* ------------------------------------------------------------------
	 * Display / heading sizes (Bebas Neue). Name = Figma desktop value.
	 * ------------------------------------------------------------------ */
	--dh-fs-display-160: clamp(4rem, 1.8873rem + 9.0141vw, 10rem);       /* 64 -> 160 */
	--dh-fs-display-96: clamp(3rem, 1.9437rem + 4.5070vw, 6rem);         /* 48 -> 96 */
	--dh-fs-display-80: clamp(2.75rem, 1.9577rem + 3.3803vw, 5rem);      /* 44 -> 80 */
	--dh-fs-display-72: clamp(2.5rem, 1.7958rem + 3.0047vw, 4.5rem);     /* 40 -> 72 */
	--dh-fs-heading-64: clamp(2.25rem, 1.6338rem + 2.6291vw, 4rem);      /* 36 -> 64 */
	--dh-fs-heading-48: clamp(1.875rem, 1.4789rem + 1.6901vw, 3rem);     /* 30 -> 48 */
	--dh-fs-heading-40: clamp(1.75rem, 1.4859rem + 1.1268vw, 2.5rem);    /* 28 -> 40 */
	--dh-fs-heading-36: clamp(1.625rem, 1.4049rem + 0.9390vw, 2.25rem);  /* 26 -> 36 */
	--dh-fs-heading-32: clamp(1.5rem, 1.3239rem + 0.7512vw, 2rem);       /* 24 -> 32 */
	--dh-fs-heading-24: clamp(1.375rem, 1.3310rem + 0.1878vw, 1.5rem);   /* 22 -> 24 */
	--dh-fs-heading-20: 1.25rem;
	--dh-fs-heading-16: 1rem;

	/* Script headings */
	--dh-fs-script-48: clamp(1.875rem, 1.4789rem + 1.6901vw, 3rem);      /* 30 -> 48 */
	--dh-fs-script-32: clamp(1.375rem, 1.1549rem + 0.9390vw, 2rem);      /* 22 -> 32 */

	/* ------------------------------------------------------------------
	 * Body sizes (Inter)
	 * ------------------------------------------------------------------ */
	--dh-fs-body-32: clamp(1.375rem, 1.1549rem + 0.9390vw, 2rem);        /* 22 -> 32 */
	--dh-fs-body-24: clamp(1.125rem, 0.9930rem + 0.5634vw, 1.5rem);      /* 18 -> 24 */
	--dh-fs-body-20: clamp(1.125rem, 1.0810rem + 0.1878vw, 1.25rem);     /* 18 -> 20 */
	--dh-fs-body-18: clamp(1rem, 0.9560rem + 0.1878vw, 1.125rem);        /* 16 -> 18 */
	--dh-fs-body-16: 1rem;
	--dh-fs-body-15: 0.9375rem;

	/* ------------------------------------------------------------------
	 * Line heights and letter spacing
	 * ------------------------------------------------------------------ */
	--dh-lh-display: 1;      /* 160 / 96 / 80 / 72 */
	--dh-lh-heading: 1.2;    /* 64 and below */
	--dh-lh-body: 1.6;
	--dh-lh-tight: 1.3;      /* short lead text, card titles */
	--dh-lh-script: 1.2;

	--dh-ls-nav: 0.05em;     /* Figma 1px on 20px */
	--dh-ls-button: 0.01em;

	/* ------------------------------------------------------------------
	 * Spacing (gaps inside components)
	 * ------------------------------------------------------------------ */
	--dh-space-4: 0.25rem;
	--dh-space-8: 0.5rem;
	--dh-space-12: 0.75rem;
	--dh-space-16: 1rem;
	--dh-space-24: 1.5rem;
	--dh-space-32: 2rem;
	--dh-space-48: clamp(2rem, 1.6479rem + 1.5023vw, 3rem);              /* 32 -> 48 */
	--dh-space-64: clamp(2.5rem, 1.9718rem + 2.2535vw, 4rem);            /* 40 -> 64 */

	/* Default vertical section padding (blocks can override per breakpoint
	 * with their padding fields). */
	--dh-section-py: clamp(3.5rem, 2.6197rem + 3.7559vw, 6rem);          /* 56 -> 96 */

	/* ------------------------------------------------------------------
	 * Layout
	 * ------------------------------------------------------------------ */
	--dh-container-max: 1440px;
	--dh-container-narrow: 952px;    /* centered text (text-center block) */
	--dh-container-prose: 960px;     /* single post body, product description */
	--dh-container-form: 760px;      /* centered form-section */
	--dh-gutter: clamp(1.25rem, 0.8099rem + 1.8779vw, 2.5rem);          /* 20 -> 40 side padding below 1440 */

	--dh-header-height: 92px;
	--dh-header-px: clamp(1.25rem, 4.6875vw, 5.625rem);                 /* side padding: 90px at 1920 */
	--dh-header-nav-gap: clamp(1.5rem, -2.2582rem + 5.0070vw, 3.75rem);  /* 24px at 1201 -> 60px at 1920 */
	--dh-header-logo-width: 100px;
	--dh-header-logo-height: 80px;
	--dh-thumb-sm: 3.5rem;           /* 56px product thumbnail in search results */
	--dh-thumb-md: 4.5rem;           /* 72px product thumbnail in the mini cart */
	--dh-drawer-width: 26.25rem;     /* 420px mini cart drawer */

	--dh-footer-pt: var(--dh-space-64);
	--dh-footer-pb: var(--dh-space-24);
	--dh-border-width-divider: 3px;

	/* ------------------------------------------------------------------
	 * Radius and borders
	 * ------------------------------------------------------------------ */
	--dh-radius-field: 2px;
	--dh-radius-button: 6px;
	--dh-radius-product: 12px;
	--dh-radius-card: 16px;
	--dh-radius-lg: 20px;
	--dh-radius-round: 999px;

	--dh-border-width: 1px;
	--dh-border-width-button: 2px;

	/* ------------------------------------------------------------------
	 * Buttons
	 * ------------------------------------------------------------------ */
	--dh-btn-padding: 1rem 2.5rem;   /* 16px 40px */
	--dh-btn-font-size: var(--dh-fs-heading-20);
	--dh-btn-bg: var(--dh-color-orange-500);
	--dh-btn-color: var(--dh-color-white);
	--dh-btn-bg-dark: var(--dh-color-green-900);          /* product cards, add to cart */
	--dh-btn-bg-disabled: var(--dh-color-green-600);      /* add to cart without variation */

	/* ------------------------------------------------------------------
	 * Form fields
	 * ------------------------------------------------------------------ */
	--dh-field-bg: var(--dh-color-white);
	--dh-field-color: var(--dh-color-green-900);
	--dh-field-placeholder: var(--dh-color-grey-600);
	--dh-field-padding: 0.75rem 1rem;   /* 12px 16px */
	--dh-field-font-size: var(--dh-fs-body-18);

	/* ------------------------------------------------------------------
	 * Motion and layering
	 * ------------------------------------------------------------------ */
	--dh-transition-fast: 150ms ease;
	--dh-transition: 250ms ease;

	--dh-z-header: 100;
	--dh-z-modal: 1000;

	--dh-focus-ring-width: 2px;
	--dh-focus-ring-offset: 3px;
}

/* Content width: 1440px from 1600px viewport up, 1320px below. */
@media (max-width: 1599px) {
	:root {
		--dh-container-max: 1320px;
	}
}

/* Users who prefer reduced motion get no transitions from tokens. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--dh-transition-fast: 0ms;
		--dh-transition: 0ms;
	}
}