/* ============================================================================
   Packed Plans — design tokens (DESIGN.md §2, §3, §4).

   THIS IS THE ONLY FILE THAT DEFINES A --pp-* CUSTOM PROPERTY, and the only file
   that redefines a --wp--preset--color--* under dark mode (SPEC §9.2). Theme CSS
   and block CSS may consume these tokens; they may never declare one.
   ========================================================================= */

/* -------------------------------------------------- metric-matched fallbacks
   Declared so the Google Fonts swap costs ~0 CLS (DESIGN §3). The overrides are
   measured against the real faces; keep them with the font stacks below. */

@font-face {
	font-family: "Instrument Serif Fallback";
	src: local("Iowan Old Style"), local("Georgia"), local("Times New Roman");
	size-adjust: 93%;
	ascent-override: 92%;
	descent-override: 24%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "DM Sans Fallback";
	src: local("Helvetica Neue"), local("Arial");
	size-adjust: 100%;
	ascent-override: 99%;
	descent-override: 31%;
	line-gap-override: 0%;
}

/* ---------------------------------------------------------------- light mode */

:root {
	color-scheme: light;

	/* brand — Sun & Ink (DESIGN §2): the luggage-tag mark, the sticker, the CTA */
	--pp-brand-ink:     #1B2A41;
	--pp-brand-sun:     #F2B441;  /*  7.83:1 against ink, either way round               */
	--pp-brand-paper:   #FAF6EE;

	/* surfaces */
	--pp-bg:            #FAF6EE;  /* paper                                          */
	--pp-surface:       #FFFFFF;  /* cards, sticky header                           */
	--pp-surface-2:     #F1EBDD;  /* quick facts, table zebra, open FAQ, disclosure */

	/* text */
	--pp-text:          #1B2A41;  /* ink — 13.4:1 on bg                        AAA */
	--pp-text-muted:    #5E6470;  /*  5.51:1 on bg                              AA */

	/* accent — clay, spent on links, the active picker and the best-value mark */
	--pp-accent:        #B8451F;  /*  4.98:1 on bg — safe for link text        AA */
	--pp-accent-text:   #FFFFFF;  /*  5.37:1 on accent                          AA */
	--pp-accent-weak:   #F6E3D9;  /* chips, active picker fill, ::selection       */

	/* call to action — ink with paper text in light, sun with ink text in dark */
	--pp-cta-bg:        var(--pp-brand-ink);
	--pp-cta-text:      var(--pp-brand-paper);  /* 13.4:1                       AAA */

	/* structure */
	--pp-border:        #E4DCCB;  /* hairlines, card edges (decorative)           */
	--pp-border-strong: #948B78;  /*  3.13:1 on bg — control edges          AA-UI */

	/* state — price deltas only */
	--pp-success:       #1F6B4A;  /*  5.98:1 on bg — below average              AA */
	--pp-success-weak:  #E2F0E8;  /* best-value row fill                          */
	--pp-warn:          #8A5A0B;  /*  5.49:1 on bg — peak / above average        AA */
	--pp-warn-weak:     #F7EBD4;  /* peak row fill                                */

	/* focus */
	--pp-focus:         #1F5FA8;  /* >=3:1 against both --pp-bg and --pp-accent   */

	/* chart */
	--pp-bar:       color-mix(in srgb, var(--pp-accent) 22%, transparent);
	--pp-bar-best:  color-mix(in srgb, var(--pp-success) 26%, transparent);
	--pp-bar-peak:  color-mix(in srgb, var(--pp-warn) 26%, transparent);
	--pp-bar-track: transparent;   /* the row background is the track */

	/* photography */
	--pp-photo-filter: none;

	/* -------------------------------------------------------- typography (§3) */
	--pp-font-display: "Instrument Serif", "Instrument Serif Fallback", "Iowan Old Style", Georgia, serif;
	--pp-font-body:    "DM Sans", "DM Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Instrument Serif ships one weight. Headings are 400 and earn emphasis from size and
	   the italic, never from a synthesised bold (DESIGN §3). */
	--pp-fw-display: 400;

	--pp-fs-display: clamp(2.625rem, 1.6rem + 4.4vw, 4.75rem); /* 42->76px page H1       */
	--pp-fs-h2:      clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem);  /* 30->40px section heads */
	--pp-fs-h3:      1.5rem;     /* 24px  card titles, itinerary day, FAQ question */
	--pp-fs-h4:      1.125rem;   /* 18px  quick-fact values, tier names            */
	--pp-fs-lead:    1.1875rem;  /* 19px  summary / dek                            */
	--pp-fs-body:    1.0625rem;  /* 17px  body copy                                */
	--pp-fs-sm:      0.9375rem;  /* 15px  card meta, table cells                   */
	--pp-fs-xs:      0.8125rem;  /* 13px  disclosure, commission note, footnotes   */
	--pp-fs-micro:   0.6875rem;  /* 11px  ALL-CAPS eyebrow only, tracked +.12em    */

	--pp-lh-tight:   1.0;
	--pp-lh-heading: 1.18;
	--pp-lh-body:    1.65;
	--pp-lh-ui:      1.4;

	--pp-measure:      68ch;
	--pp-measure-lead: 52ch;

	/* ------------------------------------- spacing, radius, shadow, motion (§4) */
	--pp-space-1: .25rem;
	--pp-space-2: .5rem;
	--pp-space-3: .75rem;
	--pp-space-4: 1rem;
	--pp-space-5: 1.5rem;
	--pp-space-6: 2rem;
	--pp-space-8: 3rem;
	--pp-space-10: 4rem;
	--pp-space-12: 6rem;   /* between major page sections (desktop) */

	--pp-gutter:  clamp(1.25rem, 5vw, 2.5rem);
	--pp-maxw:    min(100% - 2 * var(--pp-gutter), 72rem);
	--pp-maxw-prose: 42rem;

	/* Height of the sticky site header (DESIGN §6.13): the .pp-header__inner minimum
	   plus the .pp-header padding on both edges. Anything else that pins to the top of
	   the viewport — the cost table's <thead> (G1) — offsets by this, or it pins out of
	   sight underneath the header. Bumped at md, where the header grows to 72px. */
	--pp-header-h: calc(56px + 2 * var(--pp-space-2));

	--pp-radius-sm: 2px;   /* chips, tags, table cells   */
	--pp-radius-md: 4px;   /* cards, images, inputs      */
	--pp-radius-lg: 10px;  /* hero image, sticky CTA bar */
	--pp-radius-pill: 999px;

	--pp-shadow-0: none;
	--pp-shadow-1: 0 1px 2px rgb(26 23 20 / .05);        /* sticky header once scrolled */
	--pp-shadow-2: 0 6px 20px -8px rgb(26 23 20 / .18);  /* sticky mobile CTA bar       */
	--pp-shadow-inset: inset 0 -1px 0 var(--pp-border);  /* pinned <thead> edge (G1)    */
	--pp-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--pp-focus) 45%, transparent);

	--pp-ease: cubic-bezier(.2, .6, .2, 1);
	--pp-dur-fast: 120ms;
	--pp-dur: 200ms;
	--pp-dur-slow: 320ms;

	/* Breakpoints are documented here and used literally in @media, which cannot
	   read a custom property (DESIGN §7): sm 37.5em, md 56.25em, lg 75em. */
}

/* md — the header grows to 72px, so everything pinned below it moves with it. */
@media (min-width: 56.25em) {
	:root {
		--pp-header-h: calc(72px + 2 * var(--pp-space-2));
	}
}

/* ----------------------------------------------------------------- dark mode
   Declared twice, exactly as DESIGN §2 requires, so an explicit toggle wins in
   both directions and the default "system" setting still works. */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		--pp-bg:            #0F1826;
		--pp-surface:       #16213A;
		--pp-surface-2:     #1E2A45;

		--pp-text:          #F5F0E4;  /* 15.7:1 on bg                       AAA */
		--pp-text-muted:    #A9B0BD;  /*  8.17:1 on bg                      AAA */

		--pp-accent:        #E9A57F;  /*  8.61:1 on bg — link text          AAA */
		--pp-accent-text:   #1B1208;
		--pp-accent-weak:   #3A2A22;

		--pp-cta-bg:        var(--pp-brand-sun);
		--pp-cta-text:      var(--pp-brand-ink);  /* 9.65:1                        AAA */

		--pp-border:        #273553;
		--pp-border-strong: #75819A;  /*  4.55:1 on bg                    AA-UI */

		--pp-success:       #7FD3A6;  /*  9.98:1 on bg                      AAA */
		--pp-success-weak:  #163126;
		--pp-warn:          #E8B14C;  /*  9.18:1 on bg                      AAA */
		--pp-warn-weak:     #33260E;

		--pp-focus:         #8FBBEE;

		--pp-shadow-1: 0 1px 2px rgb(0 0 0 / .5);
		--pp-shadow-2: 0 8px 24px -10px rgb(0 0 0 / .6);

		--pp-photo-filter: brightness(.94) contrast(1.02);

		--wp--preset--color--base: #0F1826;
		--wp--preset--color--surface: #16213A;
		--wp--preset--color--surface-2: #1E2A45;
		--wp--preset--color--contrast: #F5F0E4;
		--wp--preset--color--muted: #A9B0BD;
		--wp--preset--color--accent: #E9A57F;
		--wp--preset--color--accent-text: #1B1208;
		--wp--preset--color--accent-weak: #3A2A22;
		--wp--preset--color--line: #273553;
		--wp--preset--color--line-strong: #75819A;
		--wp--preset--color--success: #7FD3A6;
		--wp--preset--color--success-weak: #163126;
		--wp--preset--color--warn: #E8B14C;
		--wp--preset--color--warn-weak: #33260E;
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;

	--pp-bg:            #0F1826;
	--pp-surface:       #16213A;
	--pp-surface-2:     #1E2A45;

	--pp-text:          #F5F0E4;
	--pp-text-muted:    #A9B0BD;

	--pp-accent:        #E9A57F;
	--pp-accent-text:   #1B1208;
	--pp-accent-weak:   #3A2A22;

		--pp-cta-bg:        var(--pp-brand-sun);
		--pp-cta-text:      var(--pp-brand-ink);  /* 9.65:1                        AAA */

	--pp-border:        #273553;
	--pp-border-strong: #75819A;

	--pp-success:       #7FD3A6;
	--pp-success-weak:  #163126;
	--pp-warn:          #E8B14C;
	--pp-warn-weak:     #33260E;

	--pp-focus:         #8FBBEE;

	--pp-shadow-1: 0 1px 2px rgb(0 0 0 / .5);
	--pp-shadow-2: 0 8px 24px -10px rgb(0 0 0 / .6);

	--pp-photo-filter: brightness(.94) contrast(1.02);

	--wp--preset--color--base: #0F1826;
	--wp--preset--color--surface: #16213A;
	--wp--preset--color--surface-2: #1E2A45;
	--wp--preset--color--contrast: #F5F0E4;
	--wp--preset--color--muted: #A9B0BD;
	--wp--preset--color--accent: #E9A57F;
	--wp--preset--color--accent-text: #1B1208;
	--wp--preset--color--accent-weak: #3A2A22;
	--wp--preset--color--line: #273553;
	--wp--preset--color--line-strong: #75819A;
	--wp--preset--color--success: #7FD3A6;
	--wp--preset--color--success-weak: #163126;
	--wp--preset--color--warn: #E8B14C;
	--wp--preset--color--warn-weak: #33260E;
}

/* ------------------------------------------------------------ shared basics */

::selection {
	background: var(--pp-accent-weak);
	color: var(--pp-text);
}

.pp-u-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The eyebrow rule of DESIGN §9.1: 24px accent cap, optically aligned. */
.pp-rule {
	display: block;
	inline-size: 24px;
	block-size: 2px;
	margin-block: var(--pp-space-2) var(--pp-space-2);
	margin-inline-start: -1px;
	background: var(--pp-brand-sun);
	border-radius: var(--pp-radius-sm);
}

/* Global reduce-motion kill switch (DESIGN §4). */
@media (prefers-reduced-motion: reduce) {
	*,
	::before,
	::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
}