/**
 * Pabe Holidays design tokens — "Luxury Meets Adventure".
 *
 * Source: Figma file "Pade Holidays" (TV1KxFbE1teCgcsefA4ZcT), page "01 — Brand and Design System"
 * and the variables collection (surface/*, text/*, border/*, space/*, radius/*).
 * Change values here only; components.css, the theme and the preview read them.
 *
 * Where a Figma value fails WCAG 2.2 AA in its documented use, the raw Figma value is kept
 * and the semantic role points to an adjusted value, marked "A11Y" (see docs/design-system.md).
 */

:root {
	/* Palette — exact Figma values */
	--pabe-color-ink: #0a0a0a;          /* Primary black: small labels, CTAs, footer */
	--pabe-color-charcoal: #171717;     /* Body copy, dark surfaces */
	--pabe-color-white: #fff;           /* Primary canvas, forms */
	--pabe-color-ivory: #f7f6f2;        /* Warm off-white: editorial rhythm, quiet sections */
	--pabe-color-grey-light: #e8e8e8;   /* Rules, borders, disabled surfaces */
	--pabe-color-grey-secondary: #777;  /* Large secondary text, metadata */
	--pabe-color-gold-muted: #b89a55;   /* Hairlines, focus, small accents only */
	--pabe-color-champagne: #d7c28a;    /* Small accents on dark surfaces */

	/* A11Y adjustments (not in Figma) */
	--pabe-color-grey-secondary-aa: #6e6e6e; /* #777 is 4.48:1 on white, 4.14:1 on ivory; this is 5.10 / 4.72 */
	--pabe-color-gold-focus-light: #9a7e3f;  /* #b89a55 is 2.70:1 on white; focus rings need 3:1 — this is 3.87 */

	/* Semantic roles */
	--pabe-surface: var(--pabe-color-white);
	--pabe-surface-alt: var(--pabe-color-ivory);
	--pabe-surface-inverse: var(--pabe-color-ink);
	--pabe-surface-disabled: var(--pabe-color-grey-light);
	--pabe-text: var(--pabe-color-charcoal);
	--pabe-text-strong: var(--pabe-color-ink);
	--pabe-text-secondary: var(--pabe-color-grey-secondary-aa);
	--pabe-text-disabled: var(--pabe-color-grey-secondary);
	--pabe-text-inverse: var(--pabe-color-white);
	--pabe-text-inverse-secondary: var(--pabe-color-grey-light);
	--pabe-text-accent-inverse: var(--pabe-color-champagne);
	--pabe-border: var(--pabe-color-grey-light);
	--pabe-border-strong: var(--pabe-color-ink);
	--pabe-accent: var(--pabe-color-gold-muted);
	--pabe-focus: var(--pabe-color-gold-focus-light);
	--pabe-focus-inverse: var(--pabe-color-gold-muted);

	/* Typography */
	--pabe-font-display: "Cormorant Garamond", "Times New Roman", serif;
	--pabe-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--pabe-weight-regular: 400;
	--pabe-weight-medium: 500;

	/* Display & headings: Cormorant Garamond Regular, -0.9px tracking.
	 * Figma: hero 96 desktop / 76 tablet / 54 mobile; H2 64 / 50 / 42; card H3 32. */
	--pabe-text-hero: 96px;
	--pabe-text-h2: 64px;
	--pabe-text-h3: 32px;
	--pabe-text-card-title: 36px;  /* Tour card title */
	--pabe-text-place: 28px;       /* Destination card title */
	--pabe-text-price: 32px;
	--pabe-leading-display: 1.04;
	--pabe-leading-heading: 1.1;
	--pabe-tracking-display: -0.9px;

	/* Inter */
	--pabe-text-lead: 16px;       /* Body / Lead 16/29, max 65ch */
	--pabe-text-body: 15px;       /* Body / Default 15/27 */
	--pabe-text-small: 14px;      /* Notes, descriptions on boards */
	--pabe-text-card: 13px;       /* Card overview */
	--pabe-text-ui: 12px;         /* Buttons, navigation (Medium) */
	--pabe-text-label: 11px;      /* Field labels (Medium), meta */
	--pabe-text-eyebrow: 10px;    /* Eyebrow 10/15 Medium +2.1px */
	--pabe-leading-body: 1.8;
	--pabe-leading-ui: 1.3;
	--pabe-leading-eyebrow: 1.5;
	--pabe-tracking-eyebrow: 2.1px;
	--pabe-tracking-meta: 1px;
	--pabe-measure: 65ch;

	/* Space — Figma space/* (4px base) */
	--pabe-space-0: 0;
	--pabe-space-4: 4px;
	--pabe-space-8: 8px;
	--pabe-space-12: 12px;
	--pabe-space-16: 16px;
	--pabe-space-20: 20px;
	--pabe-space-24: 24px;
	--pabe-space-32: 32px;
	--pabe-space-40: 40px;
	--pabe-space-48: 48px;
	--pabe-space-64: 64px;
	--pabe-space-80: 80px;

	/* Layout: insets 24 / 40 / 80, section rhythm 64 / 80 / 112 (mobile / tablet / desktop) */
	--pabe-inset: 80px;
	--pabe-section-y: 112px;
	--pabe-card-gap: 24px;
	--pabe-container: 1600px;

	/* Shape: 2px controls, 1px rules. No shadows, pills or glossy effects.
	 * BLEND (2026-10-25, client direction "a bit warmer", after Matour/Luggo/Weblium review):
	 * photographs and cards get soft 12px corners instead of Figma's 0px. Set to 0 to return to Figma. */
	--pabe-radius-media: 12px;
	--pabe-radius-control: 2px;
	--pabe-radius-round: 50%; /* Circular icon buttons on photo cards only */
	--pabe-rule: 1px;
	--pabe-control-height: 50px;
	--pabe-field-height: 52px;
	--pabe-target-min: 44px;

	/* Motion (Figma developer handoff) */
	--pabe-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--pabe-duration-line: 180ms;      /* Gold hover lines */
	--pabe-duration-accordion: 220ms;
	--pabe-duration-reveal: 400ms;    /* Fade reveals, <= 12px translation, once per section */
	--pabe-duration-zoom: 450ms;      /* Image zoom 1 -> 1.03 */
	--pabe-zoom-scale: 1.03;
	--pabe-reveal-shift: 12px;

	/* Scrim for text set over photographs (bottom-weighted, ink). */
	--pabe-scrim-photo: linear-gradient(180deg, rgb(10 10 10 / 0%) 35%, rgb(10 10 10 / 78%) 100%);
}

/* Tablet 600–1199 */
@media (max-width: 1199px) {

	:root {
		--pabe-text-hero: 76px;
		--pabe-text-h2: 50px;
		--pabe-inset: 40px;
		--pabe-section-y: 80px;
	}
}

/* Mobile < 600 */
@media (max-width: 599px) {

	:root {
		--pabe-text-hero: 54px;
		--pabe-text-h2: 42px;
		--pabe-inset: 24px;
		--pabe-section-y: 64px;
	}
}

@media (prefers-reduced-motion: reduce) {

	:root {
		--pabe-duration-line: 0ms;
		--pabe-duration-accordion: 0ms;
		--pabe-duration-reveal: 0ms;
		--pabe-duration-zoom: 0ms;
		--pabe-zoom-scale: 1;
		--pabe-reveal-shift: 0;
	}
}