/* ============================================================================
 * Copia dark design tokens
 * ============================================================================
 * Lifted verbatim from the live one-off landing pages (/blackhat2026 and
 * /whiskey-tasting), where every value below was already byte-identical — i.e.
 * this token set is not a new invention, it is the one that has been shipping.
 *
 * FORWARD PATH: when the main site moves to dark mode, this file is the seed.
 * Re-scope `.copia-lp` to `:root` and the tokens apply site-wide unchanged; the
 * component CSS in lp-base.css is written against these names only, never raw
 * hex, so it comes along for free. Same for lp-components.css.
 *
 * Scoped to .copia-lp for now so it CANNOT affect the live light-theme site.
 * ========================================================================= */

.copia-lp {

	/* surfaces — darkest to lightest */
	--deep: #0E0A1C;
	--ground: #17112B;
	--ground-2: #1E1640;
	--card: #221A3C;
	--card-2: #2A2049;

	/* text */
	--cream: #FBF7EC;
	--muted: #C4BEDD;
	--faint: #8F88AD;

	/* brand accents */
	--orange: #FF5643;
	--orange-2: #E43926;
	--orange-3: #FF9C92;
	--teal: #05A595;
	--teal-lite: #37C9B6;
	--blue: #5B66DC;

	/* ---------------------------------------------------------------------
	 * THE BUTTON GLOW — a real brand property, not decoration.
	 *
	 * A soft orange bloom under primary buttons, offset downward and blurred so
	 * it reads as light coming off the button rather than a drop shadow. It is
	 * what stops a flat orange rectangle looking inert on a dark surface, and it
	 * is part of the look on /blackhat2026 and the whiskey pages.
	 * ------------------------------------------------------------------- */
	--btn-glow: 0 12px 30px -14px rgba(255, 86, 67, .8);

	/* hairlines */
	--line: rgba(255, 255, 255, .09);
	--line-2: rgba(255, 255, 255, .14);

	/* ---------------------------------------------------------------------
	 * LIGHT SURFACE — for a light nav sitting above a dark page.
	 *
	 * The only place the dark palette needs a light counterpart. Kept as tokens
	 * rather than inline hex so that when the site-wide dark theme lands and the
	 * nav goes dark with it, there is one place to change.
	 * ------------------------------------------------------------------- */
	--light-bg: #FFFFFF;
	--light-text: var(--ground);
	--light-line: rgba(23, 17, 43, .12);

	/* type + measure */
	--sans: "Zalando Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--maxw: 1180px;
	--pad: clamp(1.25rem, 5vw, 3rem);
	--measure: 42rem;

	/* ---------------------------------------------------------------------
	 * SMALL-LABEL TYPE
	 *
	 * One token for every uppercase micro-label — .eyebrow, field labels, the
	 * fact labels. They were hand-picked per page at .72rem / .66rem / .56rem
	 * and the smallest were genuinely hard to read. Set it once, here.
	 *
	 * Tracking is deliberately looser than body text (uppercase needs it) but
	 * NOT as loose as the .24em these started at — at this size heavy tracking
	 * stops helping and starts hurting.
	 * ------------------------------------------------------------------- */
	--label-size: .9rem;
	--label-track: .16em;
	--label-weight: 700;

	/* ---------------------------------------------------------------------
	 * VERTICAL RHYTHM
	 *
	 * A real scale, so no one hand-picks 1rem / .7rem / 1.4rem per page and
	 * ends up with a different rhythm on every landing page.
	 *
	 * --space-label is the eyebrow-to-heading gap specifically. It is applied
	 * to the HEADING's margin-top, not the eyebrow's margin-bottom — see the
	 * long comment in lp-components.css for why that distinction is what makes
	 * it survive contact with page CSS.
	 * ------------------------------------------------------------------- */
	--space-xs: .5rem;
	--space-sm: .75rem;
	--space-md: 1.25rem;
	--space-lg: 2rem;
	--space-xl: 3rem;
	--space-label: .9rem;

	/*
	 * HEADING -> BODY. Deliberately a clamp and not one of the fixed steps above.
	 *
	 * Headings run to clamp(2rem, 4.4vw, 3.1rem) — roughly 32px to 50px — so a fixed gap is
	 * wrong at one end of that range whatever value you choose. --space-sm (12px) was being
	 * used here and read as crammed under a 50px heading at desktop widths.
	 *
	 * Widened once after review: the first pass at clamp(.9rem, 1.5vw, 1.5rem) computed 22px at
	 * 1440 and still read tight against a three-line h2. Now 17.6px at 500px rising to 32px at
	 * 1440+ — the gap grows with the type it sits under, which is the whole point of a clamp
	 * here rather than another fixed step.
	 */
	--space-heading: clamp(1.1rem, 2.2vw, 2rem);

	/* ---------------------------------------------------------------------
	 * SEMANTIC ALIASES — say what a colour is FOR, not what hue it is.
	 *
	 * New pages should use these (var(--accent)) instead of a hue name
	 * (var(--orange)), so a brand decision is one edit here rather than a hunt
	 * through every page. The three migrated pages reference hue names directly,
	 * exactly as they do today, so changing an alias cannot affect them.
	 *
	 * BOTH BRAND QUESTIONS ARE NOW SETTLED — see docs/brand-dark-theme.md §6:
	 *
	 *  1. --accent stays ORANGE. A warm amber palette was proposed for a campaign
	 *     page and rejected as off-brand: brand consistency beats vibe. Do not
	 *     infer teal-primary from the gradient artwork.
	 *  2. #05A595 is THE Copia teal, the only one, documents included. Figma's
	 *     Teal 01 #4AA295 is superseded — do not "correct" back to it.
	 * ------------------------------------------------------------------- */
	--accent: var(--orange);          /* primary action, eyebrow  <-- see (1) */
	--accent-hover: var(--orange-2);
	--surface: var(--ground);         /* default page surface */
	--surface-sunken: var(--deep);    /* footer, recessed bands */
	--surface-raised: var(--card);    /* cards */
	--text: var(--cream);
	--text-muted: var(--muted);
	--text-faint: var(--faint);
}