/**
 * GagaMuller design tokens.
 *
 * Sources, in order of authority:
 *
 *   [BRAND]        GagaMuller Brand Guidelines 2026 (V1).
 *   [FIGMA]        Figma "MK 05 - Website 2026" › Wireframe V5 (page 596:236).
 *                  Resolved from a full layer audit of all 19 desktop (1440px)
 *                  frames, 13 Oct 2026: where a value has a clear majority it
 *                  is adopted. Usage counts are noted for traceability.
 *   [PROVISIONAL]  Not specified by either source (mobile/tablet values,
 *                  breakpoints, focus, motion). Listed in DECISIONS.md.
 *
 * Fluid sizes use clamp(): MAXIMUM = Figma desktop value at 1440px;
 * MINIMUM at 375px = PROVISIONAL (no mobile frames exist in V1-V5).
 *
 * Figma "auto" line height (font default) is expressed as `normal`.
 *
 * Colour, font, size and spacing presets are mirrored in theme.json.
 * After changing a colour run: php tools/check-tokens.php
 *
 * @package GagaMuller
 */

:root {

	/* =====================================================================
	 * COLOUR – BRAND (Brand Guidelines §06–08)
	 * ===================================================================== */

	--gm-color-white: #ffffff;
	--gm-color-black: #101010;           /* Figma also uses #0f0f0f (123×) – normalised to brand black. */
	--gm-color-grey: #e5e5e5;
	--gm-color-purple: #7215f4;          /* CTA, highlights, icon badges. 6.7:1 on white. ~10% of a layout. */

	--gm-color-light-purple: #b681ff;    /* Highlight on dark (6.9:1 on #101010). Never text on white (2.8:1). */
	--gm-color-dark-purple: #500fab;
	--gm-color-dark-blue: #1a1441;

	--gm-color-blue: #5892de;            /* Accent – sparingly */
	--gm-color-dark-pink: #d2004d;       /* Accent – sparingly */
	--gm-color-pink: #ffadc3;            /* Accent – sparingly */

	--gm-color-status-success: #59e5a2;
	--gm-color-status-in-process: #9d9d9d; /* Fills only – 2.7:1 on white. */
	--gm-color-status-misc: #f5f283;
	--gm-color-status-indifferent: #e8a351;
	--gm-color-status-bad: #e44a64;
	--gm-color-status-cta: #7215f4;

	/* Graph & chart sequence – charts ONLY, in this order (§08). */
	--gm-chart-1: #434dfd;
	--gm-chart-2: #0cf571;
	--gm-chart-3: #5892de;
	--gm-chart-4: #ceff1a;
	--gm-chart-5: #15c4f4;
	--gm-chart-6: #fff710;
	--gm-chart-7: #5bf3e5;
	--gm-chart-8: #e7891c;
	--gm-chart-9: #f0221e;
	--gm-chart-10: #d2004d;
	--gm-chart-11: #ff3db1;
	--gm-chart-12: #ffadc3;
	--gm-chart-13: #753d9b;
	--gm-chart-14: #101010;
	--gm-chart-15: #e5e5e5;
	--gm-chart-16: #f5f5f7;

	--gm-gradient-brand: linear-gradient(135deg, #101010 0%, #7215f4 100%); /* §18 */

	/* =====================================================================
	 * COLOUR – NEUTRALS (FIGMA, resolved by majority use)
	 * ===================================================================== */

	--gm-color-surface-subtle: #f5f5f7;    /* Section background. 58× (vs #f8f8fa 21×). */
	--gm-color-surface-muted: #ececf1;     /* Figure / card background. 63×. */
	--gm-color-text-secondary: #61616b;    /* Intro paragraphs. 77× (vs #616166 23×). 6.1:1 on white, 5.6:1 on #f5f5f7. */
	--gm-color-text-tertiary: #54545c;     /* Card body copy. 27× (#4d4d57 24×, #595961 17× – D2). 6.4:1 on #ececf1. */
	--gm-color-on-dark-strong: #e5e5eb;    /* Body copy on dark images/cards. 15.2:1 on #101010. */
	--gm-color-on-dark-muted: #adadb2;     /* Links and copy on dark. 532×. 8.5:1 on #101010. */
	--gm-color-on-dark-subtle: #99999e;    /* Legal text on dark. 38×. 6.7:1 on #101010. */
	--gm-color-nav-pill: #242424;          /* Control fill on dark. 97×. */
	--gm-color-nav-pill-border: #383838;
	--gm-color-field-border: #dbdbe5;      /* 1.4:1 – FAILS WCAG 1.4.11 (3:1). Accessibility override required – D7. */
	--gm-color-field-placeholder: #8c8c99; /* 3.3:1 – below 4.5:1. Accessibility override required – D7. */

	/* =====================================================================
	 * COLOUR – SEMANTIC ROLES (components use these, never raw hex)
	 * ===================================================================== */

	--gm-surface: var(--gm-color-white);
	--gm-surface-subtle: var(--gm-color-surface-subtle);
	--gm-surface-muted: var(--gm-color-surface-muted);
	--gm-surface-inverse: var(--gm-color-black);
	--gm-text: var(--gm-color-black);
	--gm-text-secondary: var(--gm-color-text-secondary);
	--gm-text-tertiary: var(--gm-color-text-tertiary);
	--gm-accent: var(--gm-color-purple);
	--gm-accent-hover: var(--gm-color-dark-purple);      /* PROVISIONAL – hover states not designed (D6). */
	--gm-highlight: var(--gm-color-purple);              /* Key phrase in headings (§10). Light Purple on dark. */
	--gm-border: var(--gm-color-grey);

	/* =====================================================================
	 * TYPOGRAPHY – FAMILIES & WEIGHTS (BRAND §09–11, FIGMA)
	 * Figma uses exactly two faces: Averta PE Bold (headings, labels) and
	 * Avenir Regular (body, controls).
	 * ===================================================================== */

	--gm-font-heading: "Averta PE", "Noto Sans", "Avenir Next", "Avenir", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--gm-font-body: "Avenir", "Avenir Next", "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--gm-weight-light: 300;    /* Avenir Light (Brand; not used in Figma) */
	--gm-weight-regular: 400;  /* Avenir Regular (Figma) */
	--gm-weight-bold: 700;     /* Averta PE Bold (Figma) */
	--gm-weight-black: 900;    /* Avenir Black (Brand; not used in Figma) */

	--gm-measure: 65ch;        /* Brand: 50–70 characters per line (§10). */

	/* =====================================================================
	 * TYPOGRAPHY – HEADING SCALE (Averta PE Bold) – FIGMA
	 * ===================================================================== */

	/* Display – homepage hero "Build with Data": 175/145 (1 use, homepage) */
	--gm-text-display: clamp(4rem, 1.5572rem + 10.4225vw, 10.9375rem);
	--gm-leading-display: 0.83;

	/* H1 – inner page hero: 88/100% (6 pages; careers 84/88 folded in) */
	--gm-text-h1: clamp(2.75rem, 1.7817rem + 4.1315vw, 5.5rem);
	--gm-leading-h1: 1;

	/* H1 – Insights article / featured hero: 64/100% (14×) */
	--gm-text-h1-article: clamp(2.5rem, 1.9718rem + 2.2535vw, 4rem);
	--gm-leading-h1-article: 1;

	/* H2 – section heading: 61/66 (83×; 56/60, 61/64, 52/58 are minority variants) */
	--gm-text-h2: clamp(2.25rem, 1.6998rem + 2.3474vw, 3.8125rem);
	--gm-leading-h2: 1.08;

	/* Lead – homepage hero supporting line: 39/41 */
	--gm-text-lead: clamp(1.5rem, 1.1699rem + 1.4085vw, 2.4375rem);
	--gm-leading-lead: 1.05;

	/* Stat value: 47/50 */
	--gm-text-stat: clamp(2.25rem, 2.0079rem + 1.0329vw, 2.9375rem);
	--gm-leading-stat: 1.06;

	/* Eyebrow / section label: 25/auto (105×), beside a 40px arrow icon */
	--gm-text-eyebrow: clamp(1.125rem, 0.971rem + 0.6573vw, 1.5625rem);
	--gm-leading-eyebrow: normal;

	/* H3 – card title: 24/1.2 (~49×; 21, 22, 26, 28 are component variants – D1) */
	--gm-text-h3: clamp(1.25rem, 1.162rem + 0.3756vw, 1.5rem);
	--gm-leading-h3: 1.2;

	/* H4 – column / group heading: 20/auto (114×, footer columns) */
	--gm-text-h4: 1.25rem;
	--gm-leading-h4: normal;

	/* =====================================================================
	 * TYPOGRAPHY – TEXT SCALE (Avenir Regular) – FIGMA
	 * ===================================================================== */

	--gm-text-intro: clamp(1.125rem, 1.059rem + 0.2817vw, 1.3125rem);  /* 21 */
	--gm-leading-intro: 1.43;           /* 21/30 – section intros (26×) */
	--gm-leading-intro-hero: 1.67;      /* 21/35 – hero intros (25×) */

	--gm-text-body-lg: clamp(1.0625rem, 1.0185rem + 0.1878vw, 1.1875rem); /* 19 – card copy */
	--gm-leading-body-lg: 1.37;         /* 19/26 (27×; 19/27 22×) */

	--gm-text-body-md: 1.125rem;        /* 18/auto (100×) – service card copy, footer brand */
	--gm-leading-body-md: normal;

	--gm-text-body: 1.0625rem;          /* 17 – default paragraph (559×) */
	--gm-leading-body: 1.47;            /* 17/25 */

	--gm-text-sm: 1rem;                 /* 16/auto (255×) – "Learn more", fields, legal row */
	--gm-text-legal: 0.875rem;          /* 14/auto (69×) – consent, contact details */
	--gm-text-caption: 0.8125rem;       /* 13/auto (57×) – role / meta lines */

	--gm-text-control: 1.5625rem;       /* 25/auto (167×) – nav pills, buttons (D6) */

	--gm-tracking-heading: 0;           /* Figma uses default tracking throughout. */

	/* =====================================================================
	 * LAYOUT – CONTAINERS & GRID (FIGMA)
	 * ===================================================================== */

	--gm-artboard: 1440px;
	--gm-container: 1120px;        /* Section content: 160px inset (230× left-edge alignments) */
	--gm-container-wide: 1200px;   /* Header, hero copy, footer divider: 120px inset */
	--gm-container-text: 48rem;    /* PROVISIONAL long-form article column (no article body designed) */
	--gm-grid-gap: 1.5rem;         /* 24 – figure and news cards */
	--gm-grid-gap-lg: 2rem;        /* 32 – service cards */
	--gm-grid-columns-footer: 6;   /* Footer: 6 × 186.67px across 1120 */
	--gm-gutter: clamp(1.25rem, 0.5rem + 3.2vw, 2.5rem); /* PROVISIONAL (below 1440px) */

	/* =====================================================================
	 * SPACING – FIGMA values (auto-layout gaps and paddings, section rhythm)
	 * Named by pixel value. Only values used in the designs are tokens.
	 * ===================================================================== */

	--gm-space-4: 0.25rem;
	--gm-space-6: 0.375rem;
	--gm-space-8: 0.5rem;
	--gm-space-10: 0.625rem;
	--gm-space-12: 0.75rem;
	--gm-space-14: 0.875rem;   /* Most-used auto-layout gap (116×) */
	--gm-space-16: 1rem;
	--gm-space-18: 1.125rem;
	--gm-space-20: 1.25rem;
	--gm-space-24: 1.5rem;
	--gm-space-28: 1.75rem;    /* Card padding (28/28/28/28 – most-used padding) */
	--gm-space-32: 2rem;
	--gm-space-40: 2.5rem;     /* Eyebrow icon size; eyebrow → heading gap ≈ 24 + 40 */
	--gm-space-64: 4rem;       /* Section top (contact) */
	--gm-space-72: 4.5rem;     /* Section top (standard) */

	--gm-space-section: clamp(3rem, 2.4718rem + 2.2535vw, 4.5rem); /* 72 desktop; 48 min PROVISIONAL */

	/* =====================================================================
	 * SHAPE – FIGMA radii
	 * Brand rule §19 (equal corners) is followed everywhere except the hero,
	 * where all 19 Figma pages specify bottom-only 101px corners.
	 * ===================================================================== */

	--gm-radius-pill: 100px;       /* Buttons, nav pills, fields (279× + 78× at 26 on 52px fields) */
	--gm-radius-round: 50%;        /* Icon badges, circular buttons (32 on 64px) */
	--gm-radius-card: 1.5rem;      /* 24 – cards (79×; 28 used 35× – folded) */
	--gm-radius-feature: clamp(2rem, 1.5rem + 2.1vw, 3.1875rem); /* 51 – numbers + sector cards (Figma 262×316, 320×449); 32 min PROVISIONAL */
	--gm-radius-panel: 1rem;       /* 16 – small panels (53×; 17 folded) */
	--gm-radius-checkbox: 4px;     /* 24× */
	--gm-radius-hero: 0 0 101px 101px; /* Hero bottom corners (53×, every page) */

	/* =====================================================================
	 * CONTROL SIZES – FIGMA (desktop)
	 * ===================================================================== */

	--gm-size-button: 63px;
	--gm-size-field: 52px;
	--gm-size-field-border: 1.5px;
	--gm-size-nav-pill: 56px;
	--gm-size-eyebrow-icon: 40px;
	--gm-size-icon-badge: 64px;
	--gm-size-icon: 28px;
	--gm-size-logo-height: 63px;   /* Header/footer logo 278 × 63 */
	--gm-touch-target: 44px;       /* WCAG 2.5.5 minimum for every control */

	/* =====================================================================
	 * COMPONENT – HEADER (FIGMA Wireframe V5, identical on all 19 pages)
	 * Responsive values below 1280px: theme decision delegated by GagaMuller
	 * (13 Oct 2026) – see DECISIONS.md D15.
	 * ===================================================================== */

	--gm-header-bg: var(--gm-color-black);                 /* #101010 band */
	/* Spacing and logo: PROVISIONAL – tightened at GagaMuller's request
	   (13 Oct 2026, D20). Figma: top 49 · row gap 72 · bottom 39 · logo 63. */
	--gm-header-pad-top: var(--gm-space-32);                /* Logo / Ask bar top (Figma 49) */
	--gm-header-pad-bottom: var(--gm-space-32);             /* Below nav pills (Figma 39) */
	--gm-header-row-gap: var(--gm-space-32);                /* Row 1 → nav pills (Figma 72) */
	--gm-header-logo-height: 76px;                          /* Desktop logo height (Figma 63) */
	--gm-header-logo-height-compact: 44px;                  /* Below 1024px */

	/* Purple illumination – extracted from the footer "Get in Touch" button. */
	--gm-glow-cta: 0 8px 28px -10px rgb(114 21 244 / 0.6), 0 0 0 1px rgb(184 139 255 / 0.22);
	--gm-glow-cta-hover: 0 12px 36px -10px rgb(114 21 244 / 0.85), 0 0 0 1px rgb(184 139 255 / 0.4);
	--gm-glow-nav: 0 6px 20px -8px rgb(114 21 244 / 0.55);   /* subtler variant for the pills */
	--gm-nav-pill-width: 191px;
	--gm-nav-pill-gap: 11px;
	--gm-nav-pill-fill: var(--gm-color-nav-pill);           /* #242424 */
	--gm-nav-pill-border: var(--gm-color-nav-pill-border);  /* #383838 */
	--gm-nav-pill-fill-current: var(--gm-color-purple);     /* Current section */
	--gm-nav-pill-border-current: var(--gm-color-light-purple);
	/* Hover / keyboard focus: purple pill (client request 13 Oct 2026, D21). */
	--gm-nav-pill-fill-hover: var(--gm-color-purple);
	--gm-nav-pill-border-hover: var(--gm-color-light-purple);
	--gm-nav-label-size: 1rem;  /* 16px at ≥1440 (Figma 25px; reduced on request, D21/D34) */

	--gm-ai-bar-width: 671px;
	--gm-ai-bar-fill: #18181b;
	--gm-ai-bar-border: rgb(255 255 255 / 0.18);
	--gm-ai-bar-placeholder: rgb(255 255 255 / 0.55);       /* 6.2:1 on #18181b */
	--gm-ai-bar-chip-border: rgb(255 255 255 / 0.25);
	--gm-ai-bar-chip-text: rgb(255 255 255 / 0.5);
	--gm-ai-label-size: 0.75rem;                            /* 12px Averta PE Bold */
	--gm-ai-label-tracking: 0.08em;                         /* 0.96px at 12px */
	--gm-ai-button-text: 1.25rem;                           /* 20px Avenir */
	--gm-ai-button-arrow: 34px;

	/* Dropdown / mega panels – not designed in Figma. Approved provisional
	 * style: the Figma footer pattern (dark surface, Averta 20 headings,
	 * Avenir 17 #adadb2 links). */
	/* Dropdowns: dark frosted glass (client request 13 Oct 2026, D22). 85% opacity
	   keeps link text ≥ 4.5:1 even over a white page; solid fallback below. */
	--gm-dropdown-bg: rgb(16 16 16 / 0.85);
	--gm-dropdown-bg-solid: var(--gm-color-black);
	--gm-dropdown-blur: 24px;
	--gm-dropdown-shadow: 0 24px 48px -16px rgb(0 0 0 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.06);
	--gm-dropdown-item-radius: 12px;
	--gm-dropdown-item-hover: rgb(255 255 255 / 0.08);
	--gm-dropdown-item-current: rgb(114 21 244 / 0.3);
	--gm-dropdown-border: rgb(255 255 255 / 0.12);
	--gm-dropdown-radius: var(--gm-radius-card);
	--gm-dropdown-link: var(--gm-color-on-dark-muted);
	--gm-dropdown-link-hover: var(--gm-color-white);

	/* =====================================================================
	 * FOCUS, MOTION, LAYERS – PROVISIONAL (D8, D9)
	 * ===================================================================== */

	--gm-focus-width: 3px;
	--gm-focus-offset: 3px;
	--gm-focus-color: var(--gm-color-purple);
	--gm-focus-color-on-dark: var(--gm-color-light-purple);

	--gm-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--gm-duration: 200ms;

	--gm-z-base: 0;
	--gm-z-header: 100;
	--gm-z-dropdown: 200;
	--gm-z-overlay: 300;
	--gm-z-modal: 400;
	--gm-z-skip-link: 1000;

	/* Breakpoints – PROVISIONAL (D3). No mobile/tablet frames exist in
	 * Wireframes V1-V5. Custom properties cannot be used in media queries;
	 * keep these in sync in every @media rule (mobile-first, min-width):
	 *   sm 480 · md 768 · lg 1024 · xl 1280 · artboard 1440 */
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--gm-duration: 0ms;
	}
}