/*
 * Design tokens — Landal design system (landal.nl, October 2026).
 * Names match the design system tokens one-to-one.
 */
:root {
	/* ---------- Colour: brand ---------- */
	--brand: #0097a2;            /* Logo teal. Icons, headings 24px+. Not for small text (3.5:1 on sand). */
	--brand-websafe: #007f88;    /* Text teal: links, buttons, small brand text (4.7:1 on sand). */
	--brand-hover: #00727a;      /* Hover of links and teal buttons. */
	--brand-pressed: #00676f;    /* Pressed states. */
	--deviation: #1eacd3;        /* Secondary blue. Decorative only. */
	--deviation-hover: #1888a6;
	--deviation-light: #f2f4f8;

	/* ---------- Colour: surfaces ---------- */
	--sand: #fffae9;             /* Page background. */
	--sand-deep: #f6f1de;        /* Secondary sections, table heads, hover fills. */
	--soft: #ede8d3;             /* Hairline borders. */
	--pale: #dbd6bd;             /* Stronger borders. */
	--white: #ffffff;            /* Cards, inputs, panels on sand. */
	--firefly: #001823;          /* The one dark surface. */
	--tooltip-dark: #0b222e;

	/* ---------- Colour: text ---------- */
	--ink: #212721;              /* Primary text (15:1 on sand). */
	--drab: #5b635b;             /* Secondary text, navigation (6.1:1). */
	--dim: #95a095;              /* Borders, quiet meta only (2.7:1). */

	/* ---------- Colour: action & status ---------- */
	--action: #ec6f02;           /* Booking CTA only. */
	--action-hover: #e75402;     /* CTA hover; also warning / error colour. */
	--positive: #3dae2b;
	--offer: #f5a800;
	--offer-hover: #ec6f02;

	/* ---------- Colour: sentiment backgrounds ---------- */
	--sentiment-info: #e5f5f6;
	--sentiment-confirmation: #ecf7ea;
	--sentiment-caution: #fef6e5;
	--sentiment-warning: #fdeee6;

	/* ---------- Colour: labels & promotions ---------- */
	--label-comfort-bg: #dcfdff;
	--label-luxe: #764897;
	--label-luxe-bg: #f1ecf6;
	--label-scarcity-bg: #ffede4;
	--label-qualifier-bg: #eaf9e8;
	--label-differentiator-bg: #eef0ee;
	--label-thema-bg: #fff7e5;
	--promo-breeze: #1ecad3;
	--promo-spring: #cdde00;
	--promo-lavender: #c0afdc;

	/* ---------- Colour: inputs ---------- */
	--input-hover: #fafafa;
	--input-disabled: #bcbebc;
	--input-disabled-bg: #f5f5f5;

	/* ---------- Typography: families ---------- */
	--font-brand: "PP-Hatton Medium", "PP Hatton", Georgia, "Times New Roman", serif;
	--font-base: Inter, Arial, sans-serif;

	/* ---------- Typography: display & headings (brand face, weight 400) ---------- */
	--fs-display-mega: 68px;   --lh-display-mega: 76px;
	--fs-display-mega-sm: 44px; --lh-display-mega-sm: 52px;   /* < 48em */
	--fs-display-alpha: 44px;  --lh-display-alpha: 52px;
	--fs-heading-1: 36px;      --lh-heading-1: 44px;
	--fs-heading-1-sm: 24px;   --lh-heading-1-sm: 32px;       /* < 48em */
	--fs-heading-2: 28px;      --lh-heading-2: 36px;
	--fs-heading-3: 24px;      --lh-heading-3: 32px;
	--fs-heading-4: 20px;      --lh-heading-4: 28px;
	--fs-heading-5: 18px;      --lh-heading-5: 26px;

	/* ---------- Typography: text (Inter) ---------- */
	--fs-body: 16px;           --lh-body: 24px;
	--lh-body-long: 28px;                                     /* Paragraphs / CMS content. */
	--fs-body-sm: 14px;        --lh-body-sm: 22px;
	--fs-label: 14px;          --lh-label: 16px;
	--fs-caption: 12px;        --lh-caption: 20px;
	--fs-micro: 10px;          --lh-micro: 16px;
	--fw-regular: 400;
	--fw-bold: 600;                                           /* SemiBold mapped to "bold". */

	/* ---------- Spacing (5px steps from a 20px base) ---------- */
	--space-5: 5px;
	--space-10: 10px;
	--space-15: 15px;
	--space-20: 20px;
	--space-30: 30px;
	--space-40: 40px;
	--space-50: 50px;
	--space-60: 60px;
	--space-80: 80px;
	--space-100: 100px;
	--gutter: var(--space-20);
	--gutter-condensed: var(--space-10);

	/* ---------- Radius ---------- */
	--radius-sm: 4px;      /* Buttons, inputs, cards, labels. */
	--radius-md: 6px;
	--radius-lg: 8px;      /* Search bar, dialogs. */
	--radius-frame: 10px;
	--radius-xl: 12px;     /* Main visuals. */
	--radius-pill: 100px;
	--radius-round: 50%;

	/* ---------- Shadow ---------- */
	--shadow-low: 0 4px 8px 0 #0000001a;
	--shadow-card: 0 4px 40px 0 #2127210d;
	--shadow-card-large: 8px 8px 20px 0 #2127211a;
	--shadow-search: 2px 7px 35px 0 #0000001a;
	--shadow-tooltip: 0 3px 15px 0 #00000033;

	/* ---------- Layout ---------- */
	--container-max: 1440px;
	--container-narrow: 940px;
	--container-wider: 1920px;
	--header-height: 92px;
	--header-height-sm: 64px;
	/* Breakpoints (for reference; CSS variables can't be used in media queries):
	   tablet  min-width: 48em (768px)
	   desktop min-width: 64em (1024px) */

	/* ---------- Motion ---------- */
	--duration-fast: .1s;
	--duration-base: .15s;
	--duration-slow: .3s;
	--duration-image: .8s;
	--ease: ease-in-out;
	--ease-image: cubic-bezier(.165, .84, .44, 1);

	/* ---------- Gradients over photos ---------- */
	--overlay-photo: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
	--overlay-photo-strong: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
}