/**
 * Mapyr neutral design tokens.
 *
 * Placeholder values. Day 1 lock swaps these to real Mapyr brand pack.
 * Block + template CSS reads from these vars only - no hardcoded hex.
 *
 * Naming follows UnfoldCRO convention (--mapyr-<role>).
 */

:root {
	/* Brand colours (TBD - replace from Mapyr brand pack) */
	--mapyr-primary:        #1f6feb; /* placeholder navy-blue, baby/kids/pet premium positioning */
	--mapyr-primary-dark:   #0b4ec0;
	--mapyr-primary-fade:   #e8f0fe;
	--mapyr-accent:         #f59f00; /* placeholder gold accent */
	--mapyr-accent-fade:    #fff4d6;

	/* Neutrals */
	--mapyr-ink:            #0f172a;
	--mapyr-ink-soft:       #334155;
	--mapyr-ink-mute:       #64748b;
	--mapyr-paper:          #ffffff;
	--mapyr-paper-soft:     #f8fafc;
	--mapyr-paper-mute:     #f1f5f9;
	--mapyr-line:           #e2e8f0;
	--mapyr-line-strong:    #cbd5e1;

	/* Status / semantic */
	--mapyr-ok:             #16a34a;
	--mapyr-warn:           #d97706;
	--mapyr-error:          #dc2626;

	/* Typography stack (TBD - placeholder sans for headings + body) */
	--mapyr-font-head: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mapyr-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mapyr-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Type scale (fluid clamp, 16px base, 1.25 modular) */
	--mapyr-fs-xs:   0.75rem;   /* 12 */
	--mapyr-fs-sm:   0.875rem;  /* 14 */
	--mapyr-fs-base: 1rem;      /* 16 */
	--mapyr-fs-md:   1.125rem;  /* 18 */
	--mapyr-fs-lg:   1.25rem;   /* 20 */
	--mapyr-fs-xl:   1.5rem;    /* 24 */
	--mapyr-fs-2xl:  clamp(1.75rem, 2vw + 1rem, 2.25rem);
	--mapyr-fs-3xl:  clamp(2rem, 3vw + 1rem, 3rem);
	--mapyr-fs-4xl:  clamp(2.5rem, 4vw + 1rem, 4rem);

	/* Line-height */
	--mapyr-lh-tight: 1.15;
	--mapyr-lh-snug:  1.3;
	--mapyr-lh-base:  1.55;
	--mapyr-lh-loose: 1.75;

	/* Spacing scale (4-base) */
	--mapyr-sp-1:  0.25rem;
	--mapyr-sp-2:  0.5rem;
	--mapyr-sp-3:  0.75rem;
	--mapyr-sp-4:  1rem;
	--mapyr-sp-5:  1.5rem;
	--mapyr-sp-6:  2rem;
	--mapyr-sp-7:  3rem;
	--mapyr-sp-8:  4rem;
	--mapyr-sp-9:  6rem;

	/* Radii */
	--mapyr-radius-sm:  4px;
	--mapyr-radius-md:  8px;
	--mapyr-radius-lg:  16px;
	--mapyr-radius-pill: 999px;

	/* Shadows */
	--mapyr-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--mapyr-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
	--mapyr-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

	/* Container */
	--mapyr-container-max:  1320px;
	--mapyr-container-pad:  clamp(1rem, 3vw, 2rem);

	/* Motion */
	--mapyr-motion-fast:   120ms cubic-bezier(0.4, 0, 0.2, 1);
	--mapyr-motion-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
	--mapyr-motion-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Container utility */
.mapyr-container {
	width: 90vw;
	max-width: var(--mapyr-container-max);
	margin: 0 auto;
	padding-inline: var(--mapyr-container-pad);
}

/* Button base */
.mapyr-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--mapyr-sp-2);
	padding: 0.75rem 1.5rem;
	border-radius: var(--mapyr-radius-pill);
	font-family: var(--mapyr-font-head);
	font-weight: 600;
	font-size: var(--mapyr-fs-sm);
	line-height: 1;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform var(--mapyr-motion-fast), background var(--mapyr-motion-base), color var(--mapyr-motion-base), box-shadow var(--mapyr-motion-base);
}
.mapyr-btn--primary {
	background: var(--mapyr-primary);
	color: var(--mapyr-paper);
}
.mapyr-btn--primary:hover {
	background: var(--mapyr-primary-dark);
	transform: translateY(-1px);
	box-shadow: var(--mapyr-shadow-md);
}
.mapyr-btn--ghost {
	background: transparent;
	color: var(--mapyr-primary);
	border-color: var(--mapyr-line-strong);
}
.mapyr-btn--ghost:hover {
	background: var(--mapyr-primary-fade);
	border-color: var(--mapyr-primary);
}

/* Section spacing */
.mapyr-section {
	padding-block: var(--mapyr-sp-8);
}
@media (min-width: 768px) {
	.mapyr-section {
		padding-block: var(--mapyr-sp-9);
	}
}

/* Type defaults inside mapyr surfaces */
.mapyr-surface, .mapyr-section, .single-mapyr_brand, .post-type-archive-mapyr_brand {
	font-family: var(--mapyr-font-body);
	color: var(--mapyr-ink);
	line-height: var(--mapyr-lh-base);
}
.mapyr-surface h1, .mapyr-section h1, .mapyr-surface h2, .mapyr-section h2, .mapyr-surface h3, .mapyr-section h3 {
	font-family: var(--mapyr-font-head);
	color: var(--mapyr-ink);
	line-height: var(--mapyr-lh-tight);
	margin: 0 0 var(--mapyr-sp-4);
}