/**
 * COLOUR TOKENS — read from the Figma file, not invented.
 *
 * Two tiers:
 *   1. Primitives  raw values from the design. Never referenced by a component.
 *   2. Semantic    what components actually use.
 *
 * The indirection is what makes the per-lounge accent work: a lounge overrides
 * one semantic token and everything inside it re-themes, with no component
 * knowing which lounge it is rendering.
 */

@layer tokens {
	:root {
		/* === 1. Primitives ============================================== */

		/* Brand */
		--gold-500:  #cca862;  /* brand accent, primary button fill */

		/* Neutrals */
		--black-1000: #000000;
		--black-900: #0b0b0b;  /* dark section background */
		--ink-900:   #111111;  /* headings on light */
		--ink-600:   #3f3f3f;  /* body copy on light */
		--grey-500:  #656565;  /* measured: partners label */
		--grey-450:  #888888;  /* measured: footer body copy and contact details */
		--grey-400:  #a3a3a3;  /* measured: card meta and excerpts on black */
		--grey-100:  #eaeaea;  /* measured: section intro on black */
		--cream-100: #f4f2ec;  /* "story-bg-light" section background */
		--white:     #ffffff;

		/* Lounge accents — one per driver. Extend as lounges are added. */
		--accent-schumacher: #cd1719;  /* Ferrari red */

		/* === 2. Semantic ================================================ */

		/*
		 * The accent. Defaults to brand gold; a lounge overrides --clr-accent
		 * on its own container to re-theme everything beneath it.
		 */
		--clr-accent:      var(--gold-500);
		--clr-accent-text: var(--white);

		/* Surfaces */
		--clr-bg:           var(--white);
		--clr-bg-alt:       var(--cream-100);
		--clr-bg-inverse:   var(--black-900);
		/*
		 * True black, for bands that have to butt up against each other with no
		 * seam. The big CTA's overlay bottoms out here and the news band that
		 * follows it matches — one token so the two cannot drift apart.
		 */
		--clr-bg-deep:      var(--black-1000);

		/* Text on light surfaces */
		--clr-text:         var(--ink-900);
		--clr-text-muted:   var(--ink-600);
		--clr-text-subtle:  var(--grey-500);

		/* Text on dark surfaces */
		--clr-text-inverse:       var(--white);
		--clr-text-inverse-muted: #b9b9b9;
		--clr-text-inverse-soft:   var(--grey-100);   /* barely dimmed — intros */
		--clr-text-inverse-subtle: var(--grey-400);   /* meta, excerpts */
		--clr-text-inverse-dim:    var(--grey-450);   /* footer body, one step down again */

		/* Lines */
		--clr-border:         #ececec;  /* measured: input border */
		--clr-border-inverse: rgb(255 255 255 / 0.15);

		/* === Shape and motion =========================================== */
		--radius-pill: 999px;  /* buttons + inputs are true pills (30px on a 48px control, 60px on a 64px one) */
		--radius-card: 20px;   /* measured: experience cards */
		--radius-md:   8px;

		/* Layering. The design has both a sticky header and a sticky bottom CTA,
		   so these need to be agreed once rather than invented per component. */
		--z-base:     0;
		--z-raised:   10;
		--z-sticky:   100;   /* sticky header, sticky CTA bar */
		--z-overlay:  200;   /* dropdowns, mobile nav */
		--z-modal:    300;
		--z-toast:    400;

		--transition-fast: 150ms ease;
		--transition-slow: 300ms ease;

		/* Layout — --wrapper-max and --gutter come from 02-tokens.css */
		--measure:     30rem;  /* 480px — design body copy measures 452–509px */
	}

	/*
	 * Inverse context. Put data-theme="dark" on any section that sits on the
	 * black background and its text tokens flip — no component-level overrides.
	 */
	[data-theme="dark"] {
		--clr-bg:         var(--black-900);
		--clr-text:       var(--white);
		--clr-text-muted: var(--clr-text-inverse-muted);
		/* --grey-500 is invisible on black, so subtle needs its own dark value. */
		--clr-text-subtle: var(--clr-text-inverse-subtle);
		--clr-border:     var(--clr-border-inverse);
	}

	/*
	 * Per-lounge accent. A lounge page or section sets data-lounge and the
	 * accent cascades to every descendant.
	 */
	[data-lounge="schumacher"] {
		--clr-accent: var(--accent-schumacher);
	}
}