/**
 * EstoresDirecto — base layer.
 *
 * Reset/normalization, design tokens as CSS custom properties, base
 * typography, layout primitives, and accessibility helpers. See
 * project-docs/02-design-system.md for the token reference.
 *
 * Kept intentionally small — no page-specific styling belongs here.
 */

:root {
	/* Color */
	--ed-color-primary: #00b7b7;
	--ed-color-primary-hover: #009999;
	/*
	 * Text-safe link tokens — distinct from --ed-color-primary. Raw
	 * --ed-color-primary measures ~2.48:1 on white, failing WCAG 2.2 AA's
	 * 4.5:1 normal-text minimum (see project-docs/02-design-system.md).
	 * --ed-color-link measures ~5.17:1, --ed-color-link-hover ~7.49:1 —
	 * both verified by hand from the actual hex values. Used by the global
	 * `a` rule below and theme.json's link element; component-level link
	 * treatments (nav, footer, CTA) keep their own reviewed colors.
	 */
	--ed-color-link: #007a7a;
	--ed-color-link-hover: #005f5f;
	--ed-color-text: #2b2e31;
	--ed-color-heading: #101314;
	--ed-color-muted: #6b7278;
	--ed-color-background: #ffffff;
	--ed-color-surface: #ffffff;
	--ed-color-surface-alt: #f5f7f7;
	--ed-color-border: #e1e5e6;
	--ed-color-success: #2e9e5b;
	--ed-color-warning: #c97a1a;
	--ed-color-error: #c6402c;

	/* Dark surface (header top bar, footer) — see project-docs/02-design-system.md */
	--ed-color-graphite: #14181a;
	--ed-color-graphite-muted: #a7adb0;

	/*
	 * Typography — self-hosted (see assets/fonts/). Declared as the
	 * authoritative font stacks here for plain CSS use; the WordPress-facing
	 * equivalent (fontFace + fontFamily presets, same font choices) lives in
	 * theme.json, which is the source of truth for the Block Editor.
	 */
	--ed-font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ed-font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--ed-font-size-xs: 0.75rem;
	--ed-font-size-sm: 0.875rem;
	--ed-font-size-base: 1rem;
	--ed-font-size-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
	--ed-font-size-lg: clamp(1.625rem, 1.4rem + 0.98vw, 1.9375rem);
	--ed-font-size-xl: clamp(1.75rem, 1.45rem + 1.4vw, 2.25rem);
	--ed-font-size-2xl: clamp(2.25rem, 1.7rem + 2.4vw, 3rem);
	--ed-font-size-3xl: clamp(2.625rem, 1.63rem + 4.3vw, 4rem);
	--ed-font-size-step-number: clamp(2.75rem, 2.3rem + 1.96vw, 3.375rem);
	--ed-line-height-body: 1.65;
	--ed-line-height-heading: 1.2;
	--ed-letter-spacing-eyebrow: 0.18em;
	--ed-letter-spacing-button: 0.02em;

	/* Spacing */
	--ed-space-3xs: 0.25rem;
	--ed-space-2xs: 0.5rem;
	--ed-space-xs: 0.75rem;
	--ed-space-sm: 1rem;
	--ed-space-md: 1.5rem;
	--ed-space-lg: 2rem;
	--ed-space-xl: 3rem;
	--ed-space-2xl: 4rem;
	--ed-space-3xl: 6rem;

	/* Layout */
	--ed-container-width: 1200px;
	--ed-container-wide: 1440px;
	--ed-container-narrow: 720px;
	--ed-container-gutter: clamp(1rem, 4vw, 2.5rem);

	/* Radius */
	--ed-radius-sm: 4px;
	--ed-radius-md: 8px;
	--ed-radius-lg: 16px;
	--ed-radius-full: 999px;

	/* Shadow */
	--ed-shadow-sm: 0 1px 2px rgba(16, 19, 20, 0.06);
	--ed-shadow-md: 0 4px 12px rgba(16, 19, 20, 0.08);
	--ed-shadow-lg: 0 12px 32px rgba(16, 19, 20, 0.12);

	/* Transitions */
	--ed-transition-fast: 150ms ease;
	--ed-transition-base: 220ms ease;
	--ed-transition-slow: 400ms ease;

	/* Brand colours (third-party, for their own icons only) */
	--ed-color-whatsapp: #25d366;

	/* Icons (project-docs/14-icon-system.md) */
	--ed-icon-xs: 12px; /* chevrons, small indicators */
	--ed-icon-sm: 16px; /* inline with text: utility links, buttons */
	--ed-icon-md: 20px; /* header actions, drawer rows */
	--ed-icon-lg: 24px; /* standalone / feature icons */
	--ed-icon-stroke: 1.75; /* Lucide/custom stroke, in 24-unit viewBox units */
	--ed-icon-gap: 0.4em; /* icon ↔ label */
	--ed-icon-color: var(--ed-color-link); /* AA-safe turquoise for icon strokes */
	--ed-feature-icon-size: 44px; /* pale-turquoise circle */
	--ed-feature-icon-glyph: var(--ed-icon-md);
	--ed-feature-icon-glyph-marketing: 22px; /* custom/features/* marketing glyphs only */
	--ed-feature-icon-bg: rgba(0, 183, 183, 0.08);

	/*
	 * Editorial feature card (B2) — component tokens, used only by
	 * .ed-feature-card--editorial (components/feature-card.css). The global
	 * feature-icon defaults above (44px circle / 20–22px glyph) stay as they
	 * are for every other component; 56 / 27 applies inside B2 cards only.
	 */
	--ed-card-surface: #f5f5f4; /* neutral off-white, no beige cast */
	--ed-card-surface-hover: #f1f1f0;
	--ed-card-surface-on-alt: #ffffff; /* on .ed-section--alt (#f5f7f7) */
	--ed-card-surface-on-alt-hover: #fafafa;
	--ed-card-radius: 6px;
	--ed-card-icon-size: 56px;
	--ed-card-glyph: 27px;
	--ed-card-heading-color: #3b3a3a;
	--ed-card-text-color: #66696c;
	--ed-card-divider-width: 20px;
	--ed-card-divider-height: 1px;

	/*
	 * Focus. --ed-focus-outline uses --ed-color-link, not raw
	 * --ed-color-primary: #00B7B7 measures ~2.49:1 on light backgrounds,
	 * failing WCAG 2.2 AA's 3:1 non-text-contrast minimum (SC 1.4.11) for a
	 * UI focus indicator — same root issue already fixed for link text
	 * (see --ed-color-link above). --ed-color-link measures ~5.17:1.
	 */
	--ed-focus-ring: 0 0 0 3px rgba(0, 183, 183, 0.45);
	--ed-focus-outline: 2px solid var(--ed-color-link);
	--ed-focus-outline-offset: 2px;
}

/* -------------------------------------------------------------------- */
/* Reset / box sizing                                                    */
/* -------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--ed-color-background);
	color: var(--ed-color-text);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-base);
	line-height: var(--ed-line-height-body);
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------- */
/* Typography baseline                                                   */
/* -------------------------------------------------------------------- */

/*
 * Font-family is intentionally not set here: theme.json's heading/h1–h4
 * elements are the single source of truth for heading font-family (H1–H3
 * serif, H4 sans — see project-docs/02-design-system.md), generated as
 * plain-element selectors that would otherwise tie/conflict with this rule.
 */
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--ed-color-heading);
	line-height: var(--ed-line-height-heading);
	margin-top: 0;
}

a {
	color: var(--ed-color-link);
}

a:hover {
	color: var(--ed-color-link-hover);
}

/*
 * 600, not the browser default (bolder → 700): only 400/500/600 Montserrat
 * weights are self-hosted (see theme.json). Without this, any <strong>/<b>
 * an editor types (e.g. the Block Editor's Bold toolbar button) would
 * request 700 and trigger synthetic/faux bold.
 */
strong,
b {
	font-weight: 600;
}

/* -------------------------------------------------------------------- */
/* Focus                                                                  */
/* -------------------------------------------------------------------- */

:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: var(--ed-focus-outline-offset);
}

/* -------------------------------------------------------------------- */
/* Icons — base for estoresdirecto_icon() output (inc/icons.php).          */
/* Size with the --ed-icon-* tokens; colour comes from currentColor.       */
/* -------------------------------------------------------------------- */

.ed-icon {
	display: inline-block;
	flex: none;
	width: var(--ed-icon-sm);
	height: var(--ed-icon-sm);
	vertical-align: middle;
	/* CSS beats the SVG's own stroke-width attribute: one weight site-wide. */
	stroke-width: var(--ed-icon-stroke);
}

/* Feature / content icon: icon centred in a pale-turquoise 44px circle. */
.ed-feature-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--ed-feature-icon-size);
	height: var(--ed-feature-icon-size);
	color: var(--ed-icon-color);
	background-color: var(--ed-feature-icon-bg);
	border-radius: var(--ed-radius-full);
}

.ed-feature-icon .ed-icon {
	width: var(--ed-feature-icon-glyph);
	height: var(--ed-feature-icon-glyph);
}

/* Custom marketing glyphs (assets/icons/custom/features/): more detail, one step larger. */
.ed-feature-icon .ed-icon--feature {
	width: var(--ed-feature-icon-glyph-marketing);
	height: var(--ed-feature-icon-glyph-marketing);
}

/* -------------------------------------------------------------------- */
/* Layout primitives                                                      */
/* -------------------------------------------------------------------- */

.ed-container {
	width: 100%;
	max-width: var(--ed-container-width);
	margin-inline: auto;
	padding-inline: var(--ed-container-gutter);
}

.ed-container--wide {
	max-width: var(--ed-container-wide);
}

.ed-container--narrow {
	max-width: var(--ed-container-narrow);
}

.ed-section {
	padding-block: var(--ed-space-xl);
}

@media (min-width: 768px) {
	.ed-section {
		padding-block: var(--ed-space-2xl);
	}
}

/* -------------------------------------------------------------------- */
/* Typography primitives                                                  */
/* -------------------------------------------------------------------- */

/*
 * Section label / eyebrow — part of the EstoresDirecto brand language
 * (e.g. "NUESTROS PRODUCTOS", "GUÍA RÁPIDA"). Reusable across future
 * patterns rather than reimplemented per page. Uses --ed-color-link, not
 * raw --ed-color-primary: at 12px/600 this is normal-weight text and
 * needs 4.5:1 — raw primary measures ~2.48:1 (same issue already fixed
 * for the global `a` rule above; --ed-color-link is its AA-safe variant).
 */
.ed-eyebrow {
	display: inline-block;
	color: var(--ed-color-link);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-xs);
	font-weight: 600;
	line-height: 1;
	letter-spacing: var(--ed-letter-spacing-eyebrow);
	text-transform: uppercase;
}

/*
 * Large decorative step number ("01", "02", "03") for future step-by-step
 * components (e.g. Cómo instalar). Reusable primitive, not page-specific.
 * Uses --ed-color-link, not raw --ed-color-primary: even at large-text
 * size this needs 3:1 and raw primary measures ~2.48:1 — same AA-safe
 * variant used by the global `a` rule and .ed-eyebrow above.
 */
.ed-step-number {
	display: block;
	color: var(--ed-color-link);
	font-family: var(--ed-font-heading);
	font-size: var(--ed-font-size-step-number);
	font-weight: 400;
	line-height: 1;
}

/*
 * Shared section header (eyebrow + title + optional lead) — introduced on
 * Home (was page-scoped in home.css) and promoted here once a second page
 * (Cómo medir) needed the same shape, per project-docs/05-components.md's
 * "consolidate once a second page needs it" rule.
 */
.ed-section__header {
	max-width: 640px;
	margin-bottom: var(--ed-space-xl);
}

.ed-section__header.ed-text-center {
	margin-inline: auto;
}

.ed-section__header .ed-eyebrow {
	margin-bottom: var(--ed-space-2xs);
}

.ed-section__title {
	margin: 0;
}

.ed-section__lead {
	margin: var(--ed-space-sm) 0 0;
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-md);
}

/* -------------------------------------------------------------------- */
/* Accessibility helpers                                                  */
/* -------------------------------------------------------------------- */

.ed-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------- */
/* Reduced motion                                                         */
/* -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}