/*
 * Buzz Gym brand tokens.
 *
 * The one place a Buzz colour, font, spacing step, corner radius or layout
 * constant is written down. Registered by frontend\assets\BrandAsset, which
 * every other Buzz bundle depends on, so it is always first in the page.
 *
 * Tokens only. This file must never style an element: it is loaded on the
 * in-club dashboard, the standalone Reformer page and the join funnel as well
 * as the portal, and each of those sets its own body, links and headings.
 * Change the variable, not the rule.
 *
 * Brand values match www.buzzgym.co.uk (green, Montserrat, Oswald, Arial).
 * The public site's spacing and radii are deliberately NOT copied; the member
 * site has its own small scales below and nothing should step outside them.
 */
:root {
	/* ------------------------------------------------------------- brand */

	--buzz-green: #76b711;
	--buzz-green-dark: #409e31;
	/* Hover and link-hover green on dark surfaces. */
	--buzz-green-bright: #8fd41c;
	--buzz-gold: #b6a071;

	/* Text drawn ON a green (or gold) fill. Black, not white: white on
	   #76b711 is about 2.5:1, black is about 8.6:1. */
	--buzz-on-accent: #000;

	/* ------------------------------------------------------------ states */

	/* Capacity and availability. Never the only signal for a state: every
	   one is paired with a word and a glyph for colourblind staff and
	   members. */
	--buzz-red: #eb3636;
	--buzz-amber: #e59c38;
	--buzz-light-green: #52b348;
	--buzz-cyan: #38b6c9;

	/* Readable text versions of the state colours for use on dark
	   surfaces, where the full-strength colour is too heavy for a line of
	   copy. */
	--buzz-red-text: #ff8080;
	--buzz-amber-text: #ffc978;
	--buzz-gold-text: #e3d8c2;

	/* The same colours as bare R, G, B channels, for translucent tints:
	   rgba(var(--buzz-green-rgb), 0.14). Keep these in step with the hex
	   values above. */
	--buzz-green-rgb: 118, 183, 17;
	--buzz-gold-rgb: 182, 160, 113;
	--buzz-red-rgb: 235, 54, 54;
	--buzz-amber-rgb: 229, 156, 56;
	--buzz-light-green-rgb: 82, 179, 72;
	--buzz-cyan-rgb: 56, 182, 201;

	/* Chart series (BzChart), in this fixed order and never cycled: a chart
	   with more series than this splits into small multiples instead of
	   inventing colours. Brand green leads; the rest are the dataviz
	   reference hues stepped for the dark panel. Validated against #141414:
	   all inside the lightness band, above the chroma floor, worst adjacent
	   CVD ΔE 13.2 and normal-vision ΔE 19.3. Lines also cycle solid, dashed
	   and dotted, and every chart has a legend and a table of the numbers,
	   so no series is told apart by colour alone. */
	--buzz-chart-1: #6aa50f;   /* green */
	--buzz-chart-2: #9085e9;   /* violet */
	--buzz-chart-3: #d95926;   /* orange */
	--buzz-chart-4: #2fa3b4;   /* cyan */
	--buzz-chart-5: #c98500;   /* yellow */
	--buzz-chart-6: #d55181;   /* magenta */
	--buzz-chart-7: #3987e5;   /* blue */
	--buzz-chart-8: #e66767;   /* red */

	/* ---------------------------------------------- surfaces (2026 look) */

	/* Darkest to lightest. The new pages are black-led like the public
	   site: panels lift off the canvas rather than being outlined. */
	--buzz-black: #000;
	--buzz-surface-0: #0b0b0b;   /* page canvas */
	--buzz-surface-1: #141414;   /* panel, card */
	--buzz-surface-2: #1c1c1c;   /* raised: input, card within a card */
	--buzz-surface-3: #232323;   /* hover, pressed */

	--buzz-line-soft: #1f1f1f;   /* dividers inside a panel */
	--buzz-line: #2c2c2c;        /* panel and card borders */
	--buzz-line-strong: #444;    /* hover borders, empty-state outlines */

	--buzz-text: #fff;
	--buzz-text-soft: #d4d4d4;   /* secondary copy that still reads as copy */
	--buzz-text-muted: #a8a8a8;  /* labels, hints, metadata */
	--buzz-text-dim: #7a7a7a;    /* placeholders, past and disabled items */

	/* ------------------------------------------------------------- shape */

	/* Four radii and no others. Small for tags, pips and the tightly packed
	   class cards; medium for form fields and notices; large for panels and
	   cards; pill for buttons, chips and toggles. */
	--buzz-radius-sm: 4px;
	--buzz-radius-md: 10px;
	--buzz-radius-lg: 14px;
	--buzz-radius-pill: 999px;

	/* Keyboard focus. White, because the ring has to show against black
	   canvas and against green fills alike. */
	--buzz-focus-ring: #fff;

	/* Spacing. A fixed 4px-based scale: margins, padding and gaps should
	   come from here rather than being picked by eye. */
	--buzz-space-1: 4px;
	--buzz-space-2: 8px;
	--buzz-space-3: 12px;
	--buzz-space-4: 16px;
	--buzz-space-5: 24px;
	--buzz-space-6: 32px;
	--buzz-space-7: 48px;

	/* -------------------------------------------------------------- type */

	/* Loaded by BrandAsset: Montserrat 400/700 and Oswald 700 only. Ask for
	   another weight here and the browser will fake it. */
	--buzz-font-heading: 'Montserrat', sans-serif;
	--buzz-font-display: 'Oswald', sans-serif;
	--buzz-font-body: Arial, Helvetica, sans-serif;

	/* ------------------------------------------------------------ layout */

	/* These three are linked: the slide-out sidebar hangs directly below
	   the fixed header, and .top-margin clears the header with 20px of
	   breathing room, so the header height is the single source of truth. */
	--buzz-header-height: 75px;
	--buzz-top-margin: calc(var(--buzz-header-height) + 20px);
	--buzz-sidebar-width: 250px;

	/* Widest a full-width page's content runs on a large monitor. */
	--buzz-content-max: 1180px;

	/* ------------------------------------------------ legacy portal only */

	/* Used by globalbs4.css and the pages that have not moved to the 2026
	   look yet. New work uses the surface, line and text tokens above;
	   these go when the last legacy page does. */
	--buzz-panel: #232323;
	--buzz-rule: #2f2f2f;
	--buzz-grey-hover: #eeeeee;
	--buzz-off-white: #faebd7;
	--buzz-input-border: #c7c7c7;

	/* Member profile photos. The placeholder greys are the muted pair the
	   initials fall back to when somebody has not uploaded a photo yet. */
	--buzz-avatar-placeholder-border: #6c757d;
	--buzz-avatar-placeholder-text: #adb5bd;

	/* WhatsApp-style message bubbles */
	--buzz-msg-us: #202c33;
	--buzz-msg-member: #005c4b;
	--buzz-msg-unread: #6c757d;

	/* App "go pro" call to action, which sits on its own green */
	--buzz-cta: #51ad31;
	--buzz-cta-hover: #4ca52c;
}