/* Mykish design tokens — the single canonical :root, shared by mykish-core-pages,
 * mykish-resort-template, mykish-deal-template. Story: WP-Dev Phase 6 Slice 0a.
 * Source of truth: docs/design/TOKENS_RECONCILIATION.md §4 (ADR-007 Phase 4 artifact).
 * Never edit a token value in a per-template style.css — change it here once. */
:root {
	/* ---- Colour (DESIGN v1.1 — unchanged) ---- */
	--mk-teal:        #00c2cb;   /* brand accent: rule, CTA accent, large brand moment (whisper: one/screen) */
	--mk-teal-dark:   #009a9e;   /* hover fill / visited */
	--mk-teal-text:   #00787b;   /* AA-safe teal for small text & links on light */
	--mk-ink:         #1a1a1a;   /* body ink + Primary CTA fill (A8) */
	/* Phase-R Step 5 (A1, PO-ratified 2026-07-25): page/section ground is pure white site-wide;
	 * cream/beige is banned as any background. --mk-surface used to be a warm cream (#f8f7f2)
	 * driving .mk-section:nth-of-type(even)/.mk-section--alt across every template — retoned to
	 * white here, the single source of truth, so no per-template CSS needed editing. Kept as a
	 * distinct token (not deleted) so a future "faintest neutral gray" alternation still has a
	 * named hook without reopening every call site. */
	--mk-surface:     #ffffff;   /* was #f8f7f2 (warm cream) — now pure white, matches --mk-white */
	--mk-alt-surface: #f0f4f5;   /* faintest neutral gray (cool, not cream) — sparing use only: chips, trust-strip, pull-quote card */
	--mk-white:       #ffffff;
	--mk-grey:        #6b7280;   /* muted text / metadata */
	--mk-border:      #e5e7eb;   /* hairline */
	--mk-gold:        #d4a853;   /* IATA/CLIA pills, deal-type accent (sparingly) */
	/* Scoped register (TOKENS R10) — Scandinavia earned-dark ONLY, never a global dark mode */
	--mk-ink-canvas:  #0e1214;   /* earned-dark section bg (aurora imagery only) */
	--mk-on-dark:     #f4f6f7;   /* text on an earned-dark canvas */

	/* ---- Layout (unchanged) ---- */
	--mk-container:   1200px;
	--mk-measure:     68ch;
	--mk-pad-x:       24px;                          /* →40px @768, →80px @1024 */

	/* ---- Spacing rhythm ---- */
	--mk-section-y:   clamp(96px, 12vw, 140px);      /* CHANGED (R2/R3): major-section rhythm, unified */
	--mk-space-lg:    48px;                          /* within-section (v1.1 Medium) */
	--mk-space-md:    24px;                          /* element gap   (v1.1 Small)  */
	--mk-space-sm:    16px;

	/* ---- Type scale (NEW — fills v1.1 gap; Montserrat 400/600/700) ---- */
	--mk-fs-display:  clamp(2.6rem, 5.5vw, 4.5rem);  /* hero: ~42→72px (R1) */
	--mk-fs-h2:       clamp(1.75rem, 3.2vw, 2.5rem); /* section heading ~28→40px */
	--mk-fs-h3:       clamp(1.25rem, 2vw, 1.5rem);   /* sub-heading ~20→24px */
	--mk-fs-lead:     1.1875rem;                     /* 19px lead/intro */
	--mk-fs-body:     1.0625rem;                     /* 17px body (brief §7) */
	--mk-fs-small:    0.8125rem;                     /* 13px caption/meta */
	--mk-fs-eyebrow:  0.75rem;                       /* 12px overline/badge */

	/* ---- Tracking (NEW — v1.1 §3 amendment) ---- */
	--mk-track-display: -0.02em;   /* tight on display (amendment) */
	--mk-track-tight:   -0.01em;   /* h2/h3 */
	--mk-track-wide:     0.12em;   /* eyebrows, badges, footer heads (small type only) */
	--mk-track-cta:      0.08em;   /* buttons (~+1px @16px) */

	/* ---- Line-height (NEW — was hardcoded) ---- */
	--mk-lh-display:  1.05;
	--mk-lh-heading:  1.2;
	--mk-lh-body:     1.7;         /* brief §7 / v1.1 */

	/* ---- Radius (unchanged) ---- */
	--mk-r-btn:  8px;
	--mk-r-card: 16px;
	--mk-r-pill: 999px;

	/* ---- Shadow (unchanged; CTAs must STOP hardcoding and use these) ---- */
	--mk-shadow:    0 1px 2px rgba(16,24,40,.04), 0 14px 30px -14px rgba(16,24,40,.16);
	--mk-shadow-lg: 0 2px 6px rgba(16,24,40,.06), 0 30px 60px -22px rgba(16,24,40,.24);

	/* ---- Motion (NEW duration/ease-out — R6) ---- */
	--mk-dur:       280ms;                          /* soft base (250–300 register) */
	--mk-ease:      cubic-bezier(0.4, 0, 0.2, 1);   /* base (unchanged) */
	--mk-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);  /* scroll-reveal settle */

	/* ---- SECTION RHYTHM — the three-step scale (PO ruling 2026-08-04) ---------------------
	 * These were declared privately inside mykish-resort-template/style.css, so the deal template
	 * could not see them and fell back to the single flat --mk-section-y (140px at 1440). Measured
	 * consequence: the deal page ran 280px of padding on twelve of fifteen bands against the
	 * resort's 192px, and three deal bands ended up MORE THAN HALF padding by height
	 * (mk-deal-resort-link: 377px tall, 280px of it padding = 74%).
	 *
	 * The resort's rhythm is not one value — it is a scale, applied by band weight. That is the
	 * thing to inherit. Moved here so every surface gets it, exactly as the glass recipe was:
	 * a fix inside one template protects one template.
	 *
	 * mykish-resort-template/style.css keeps its own identical declarations and loads after this
	 * file, so the resort renders byte-identically either way. */
	--mk-sec-lg: clamp(72px, 9vw, 112px);   /* 112 @1440 · 72 @390 — large editorial bands */
	--mk-sec-md: clamp(64px, 8vw, 96px);    /*  96 @1440 · 64 @390 — the default */
	--mk-sec-sm: clamp(56px, 7vw, 80px);    /*  80 @1440 · 56 @390 — thin/utility bands */

	/* ---- Hero caps (NEW tokens — R8) ---- */
	--mk-hero-h:        clamp(340px, 78vh, 720px);  /* desktop cap */
	--mk-hero-h-mobile: clamp(280px, 72svh, 560px); /* svh cap, dodges toolbar bug */

	/* ---- Ken Burns (NEW — R7; desktop only, reduced-motion off) ---- */
	--mk-kenburns-dur:   22s;
	--mk-kenburns-scale: 1.06;
}

@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
	@keyframes mk-kenburns { from { transform: scale(1); } to { transform: scale(var(--mk-kenburns-scale)); } }
	.mk-hero-media { animation: mk-kenburns var(--mk-kenburns-dur) var(--mk-ease) both alternate; }
}
/* mobile: no Ken Burns (LCP); scroll-reveals stay everywhere and honour reduced-motion */

/* =================================================================================================
 * GLASS PANEL — the ratified recipe (PO ruling 2026-07-31, PERMANENT)
 *
 * THIS LIVES HERE, IN THE SHARED TOKENS FILE, ON PURPOSE. The law's own root-cause paragraph
 * names the failure it is closing: the recipe was ratified as a fix to the RESORT hero panel, so
 * it lived in that template's stylesheet and nowhere else. HOME-V2 then built a brand-new panel
 * over photography, inherited nothing, and shipped as an ink slab. A fix protects one surface; a
 * law has to protect the surfaces nobody has built yet — so the recipe belongs on the one
 * stylesheet every surface already loads.
 *
 * THE TEST IS NOT THE NUMBERS, IT IS THE PHOTOGRAPH: it must be visibly ALIVE through the panel.
 * Measured on shape retention this recipe holds 76.0%; the earlier 0.72/blur(40px) slab held
 * 28.9% and passed a harness for four rounds while the PO kept saying, correctly, that it looked
 * like a wall.
 *
 * LEGIBILITY IS CARRIED BY TEXT HALOS AND SHADOWS, NEVER BY A DARKER FILL. If a pass needs more
 * contrast the levers are, in order: the type's own halo · a slower gradient ramp through the
 * middle · the hero's own local bright-hero gradient underneath. Re-darkening this fill undoes
 * the whole thing and is a golden-rule-class regression — stop and escalate rather than nudge
 * the alpha.
 *
 * mykish-resort-template/style.css keeps its own identical .mk-panel-inner declaration and loads
 * after this file; the values match exactly, so that surface is unchanged either way. Solid ink
 * stays allowed ONLY where no photograph sits behind the panel (.mk-ctapanel, .mk-minibar, any
 * card on a white section).
 * ============================================================================================== */
.mk-panel-inner {
	background: linear-gradient(180deg, rgba(26,26,26,0.28) 0%, rgba(26,26,26,0.08) 100%);
	backdrop-filter: blur(2px) saturate(1.15);
	-webkit-backdrop-filter: blur(2px) saturate(1.15);
	border: 1px solid rgba(255,255,255,0.14);
	border-radius: var(--mk-r-panel);
	padding: 26px;
	color: var(--mk-white);
	/* 1px top-edge highlight, the way a real pane catches light; inset so the other three edges
	   keep the quieter hairline. */
	box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.18), var(--mk-shadow-lg);
}
/* No-backdrop-filter browsers only. Without the blur this gradient over a busy photograph is
   unreadable, so that branch alone goes near-opaque. Modern Chrome/Safari never see it. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.mk-panel-inner { background: linear-gradient(180deg, rgba(26,26,26,0.94) 0%, rgba(26,26,26,0.86) 100%); }
}