/*
 * Janda Events — design tokens
 *
 * Values come from the Figma variable definitions on the Sitemap & Mobile page
 * (file QHqajb2gg17xnbSeCYEVrp). Cached at tools/figma-cache/design-system.json.
 * Nothing in the theme should hard-code a colour, size or gutter that exists here.
 */

:root {
	/* --- Colour ---------------------------------------------------------- */
	--c-primary-50: #effcfc;
	--c-primary-100: #d7f5f6;
	--c-primary-500: #2db8c7; /* highlight */
	--c-primary-800: #255965; /* main */
	--c-primary-900: #234b56;

	--c-body: #3e3e3e;
	--c-white: #ffffff;
	--c-black: #000000;

	/* The mobile drawer CTA uses its own accent in the design (#33B6C5), a
	   shade off primary/500. Kept exact rather than normalised. */
	--c-accent-cta: #33b6c5;

	--c-ground-dark: #3e3e3e; /* Why Us / dark bands — matches the hero divider fill */
	--c-ground-footer: #333333;
	--c-ground-light: var(--c-white);
	--c-ground-tint: var(--c-primary-50);
	--c-ground-mist: #fafafa;  /* Wedding Entertainment "Vibes" band */
	--c-ground-frost: #f3ffff; /* Wedding Entertainment FAQ band — a hair cooler than primary/50 */

	--c-text: var(--c-body);
	/*
	 * Body copy on a dark band is not white. Sampled off the frame's own export
	 * of the dark "Why us" band (tools/figma-assets/51288-10779.png, ground
	 * #3e3e3e): the three heading lines ink at #f2efea and the button label at
	 * #ffffff, but the paragraph's glyph cores sit flat at #c5c5c5 — white at
	 * 0.7 over that ground. It was rendering pure white everywhere, which is
	 * the same slip in every dark band on the site.
	 *
	 * 6.1:1 against #3e3e3e, so this is a fidelity fix, not a contrast trade.
	 * Components that set their own on-dark colour keep it: the footer's links
	 * are white at 0.8 (#d6d6d6 over #333, which is what its export measures)
	 * and the hero copy is #effcfc.
	 */
	--c-text-on-dark: #c5c5c5;
	--c-heading: var(--c-primary-800);
	--c-heading-on-dark: var(--c-white);
	--c-link: var(--c-primary-800);
	--c-link-hover: var(--c-primary-500);
	--c-border: rgba(62, 62, 62, 0.16);
	--c-border-on-dark: rgba(255, 255, 255, 0.24);
	--c-focus: var(--c-primary-500);

	/* --- Type ------------------------------------------------------------ */
	--font-display: "Nyght Serif", "Nyght Serif Fallback", "Playfair Display", Georgia, "Times New Roman", serif;
	--font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--fs-display-4xl: 5rem;    /* 80 */
	--fs-display-3xl: 4rem;    /* 64 */
	--fs-display-2xl: 3rem;    /* 48 */
	--fs-display-xl: 2.5rem;   /* 40 */
	--fs-display-lg: 1.5rem;   /* 24 */

	--fs-body-xl: 1.25rem;     /* 20 */
	--fs-body-lg: 1.125rem;    /* 18 */
	--fs-body-md: 1rem;        /* 16 */
	--fs-body-sm: 0.875rem;    /* 14 */
	--fs-body-xs: 0.75rem;     /* 12 */

	--lh-display: 1.2;
	--lh-body: 1.5;
	--lh-tight: 1.3;

	--ls-display: -0.02em;     /* Figma letterSpacing -2 on the 48/24 styles */
	--ls-eyebrow: 0.56px;      /* Figma 51288:10784 */

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* --- Space ----------------------------------------------------------- */
	--space-2: 0.125rem;
	--space-4: 0.25rem;
	--space-8: 0.5rem;
	--space-12: 0.75rem;
	--space-16: 1rem;
	--space-20: 1.25rem;
	--space-24: 1.5rem;   /* Figma gap-4 */
	--space-32: 2rem;
	--space-40: 2.5rem;   /* Figma gap-2 */
	--space-48: 3rem;
	--space-56: 3.5rem;
	--space-64: 4rem;
	--space-80: 5rem;
	--space-96: 6rem;
	--space-120: 7.5rem;

	--section-y: var(--space-64);
	--section-y-lg: var(--space-96);

	/* --- Layout ---------------------------------------------------------- */
	--frame-desktop: 1440px;

	/*
	 * The Figma frame is 1440 wide (1344 content + 48px gutters), and below that
	 * the container simply fills. Above it the container grows rather than
	 * stranding the design in a 1344 column on a large monitor: 1344 at 1440,
	 * 1600 at 1920, capped at 1728 from ~2160 up. Section internals are
	 * expressed as percentages of this, so the design's proportions hold at
	 * every size.
	 */
	/*
	 * How much of the next card a rail always leaves showing. A row that ends
	 * exactly on the viewport edge reads as a finished layout, so nothing tells
	 * a touch user it drags — the sliver is the affordance. Applied on .rail's
	 * items, where it only bites when an item would otherwise fill the rail.
	 */
	--rail-peek: 56px;

	--container: clamp(1344px, 576px + 53.33vw, 1728px);
	--container-narrow: 900px;
	--gutter: 1.5rem;     /* 24 — mobile */
	--gutter-lg: 3rem;    /* 48 — desktop */

	/*
	 * Header bar. The header is sticky, so its height is a token rather than a
	 * literal: the mega panel hangs off it, the drawer sizes against it and
	 * anchored links have to clear it, and all three have to follow the bar as
	 * it compacts on scroll. `.site-header.is-stuck` re-points --header-h at
	 * the compact pair, so everything downstream follows with no extra rules.
	 */
	--header-h: 88px;
	--header-h-stuck: 72px;
	--header-logo-h: 56px;
	--header-logo-h-stuck: 44px;

	/*
	 * Height of the footer's angled top edge. A token because a section that
	 * ends against the footer has to reserve this much extra bottom padding for
	 * the angle to ride up into — otherwise the angle either eats the section's
	 * last element or drops onto the page background and shows a white wedge.
	 * 64.29 on the 428 frame (51288:1234), 81.5 on the 1440 one.
	 */
	--footer-angle-h: 64.29px;

	/*
	 * Height of the angled divider that closes every hero band. The same shape
	 * as the footer's, and the frames draw it at the same two heights: 64 on the
	 * 428 frames, 81.5 on the 1440 ones. It is stretched, not scaled
	 * (preserveAspectRatio="none"), so the slope steepens as the viewport
	 * narrows rather than the band getting shorter.
	 */
	--hero-angle-h: 64px;

	/*
	 * The wash over every hero photo. Measured off the frames rather than
	 * guessed: sampling the text-free outer columns of seven desktop frames and
	 * three mobile ones against the same build photo, the implied alpha runs
	 * 0.80 at the top of the hero down to 0.22 at the bottom, on the same ramp
	 * every time — a gradient, not the flat wash this used to be. Note the hero
	 * box starts at y=0 with the fixed header over it, so the ramp is measured
	 * from the top of the viewport, not from below the bar. Shared by the home,
	 * we, artist, article and package heroes, which the frames treat alike.
	 */
	--hero-wash: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.22));

	/* --- Shape ----------------------------------------------------------- */
	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;
	--radius-lg: 1rem;
	--radius-xl: 1.5rem;
	--radius-pill: 999px;
	--radius-circle: 50%;

	--shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08);
	--shadow-raised: 0 8px 32px rgba(0, 0, 0, 0.16);

	/*
	 * --- Controls ---------------------------------------------------------
	 *
	 * Every pill in every frame measures its label plus exactly 64: 32 each
	 * side, and no minimum width. Checked against six of them — Plug Me In 140,
	 * Let's Gooo! 148, Contact Us 150, Enquire Today 171, Let's Get Started 195,
	 * Check Availability 197 — all of which are label + 64 to the pixel.
	 *
	 * The blanket 150 minimum that used to sit here fought that from both ends:
	 * it padded the short labels out past their designed width and, with 24px
	 * sides, left the long ones ~18px narrower than drawn. Buttons that want a
	 * floor (the carousel's Previous/Next pair) set their own.
	 */
	--btn-height: 3rem;        /* 48 */
	--btn-min-width: 0;
	--btn-padding-x: 2rem;     /* 32 */

	/* --- Motion ---------------------------------------------------------- */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--dur-fast: 150ms;
	--dur: 250ms;
	--dur-slow: 400ms;

	/* --- Depth ----------------------------------------------------------- */
	--z-header: 100;
	--z-dropdown: 110;
	--z-drawer: 120;
	--z-overlay: 115;
}

/* Desktop gutter kicks in once the viewport can hold the 1344 container plus air. */
@media (min-width: 64em) {
	:root {
		--gutter: var(--gutter-lg);
		--section-y: var(--space-96);
		--section-y-lg: var(--space-120);
		--footer-angle-h: 81.5px;
		--hero-angle-h: 81.5px;
	}
}

/* The full header bar only fits from 76em — see the header block in
   components.css for why it switches there and not at 64em. */
@media (min-width: 76em) {
	:root {
		--header-h: 112px;
		--header-h-stuck: 88px;
		--header-logo-h: 86px;
		--header-logo-h-stuck: 64px;
	}
}