/* ==========================================================================
   LUMIX PROCUT design tokens.

   Source of truth: the LUMIX PROCUT Design System (Claude Design,
   project/tokens.json). Names and values below match it exactly; change
   them there first, then here.

   The extensions block at the end holds theme-level values the system does
   not define yet (fluid section spacing, motion, layers, an error colour).
   ========================================================================== */

:root {
	/* ---------- Colour (one light theme) ---------- */
	--surface:          #ffffff; /* page background */
	--surface-alt:      #f6f6f6; /* alternating bands, cards on surface, photo plates */
	--surface-sunken:   #eaeaea; /* footer, form wells; body copy here uses --text, never --text-muted */
	--ink:              #231f20; /* headings, high-emphasis text (logo charcoal, 16.3:1 on white) */
	--ink-nav:          #231f20; /* primary navigation labels */
	--text:             #575757; /* body copy (7.2:1 on white, 6.0:1 on #eaeaea) */
	--text-muted:       #717171; /* captions, metadata; on surface and surface-alt only */
	--line:             #e1e1e1; /* decorative hairlines, card borders (not control borders) */
	--line-strong:      #7d7d7d; /* input, checkbox and secondary button borders */
	--lumix-green:      #7ac47f; /* THE brand colour: a fill (buttons, bars, discs, CTA band), never text on white */
	--lumix-green-deep: #51a356; /* hover/pressed green fills, large green blocks; text on it is --on-brand */
	--on-brand:         #231f20; /* text and icons on green and yellow fills */
	--lumix-yellow:     #ece53e; /* small accent only; never text on light grounds, never a large block */
	--link:             #231f20; /* inline links: charcoal text, 2px green underline */
	--focus:            #231f20; /* keyboard focus ring colour */

	/* ---------- Typography ---------- */
	/* "Montserrat Fallback" is a size-matched local face (fonts.css) that stops layout shift while Montserrat loads */
	--font-display: Montserrat, "Montserrat Fallback", "Helvetica Neue", Arial, sans-serif;
	--font-text:    Arimo, Arial, "Helvetica Neue", sans-serif;

	/* Type styles (size / line height / weight / tracking) */
	--display-xl-size: 56px;  --display-xl-line: 60px;  /* 700, -0.02em: hero headline, one per page */
	--display-lg-size: 40px;  --display-lg-line: 46px;  /* 600, -0.01em: page titles (H1) */
	--heading-1-size:  30px;  --heading-1-line:  36px;  /* 600, -0.01em: section headings (H2) */
	--heading-2-size:  20px;  --heading-2-line:  28px;  /* 600: card titles, sub-sections (H3) */
	--eyebrow-size:    13px;  --eyebrow-line:    16px;  /* 700, 0.12em, UPPERCASE */
	--nav-size:        14px;  --nav-line:        24px;  /* 600, 0.06em, UPPERCASE */
	--button-size:     15px;  --button-line:     20px;  /* 600, 0.06em, UPPERCASE */
	--body-lg-size:    18px;  --body-lg-line:    28px;  /* lead paragraphs */
	--body-size:       16px;  --body-line:       24px;  /* default copy */
	--body-sm-size:    14px;  --body-sm-line:    20px;  /* captions, spec rows, footer links, help text */
	--phone-size:      18px;  --phone-line:      24px;  /* Arimo 700: the sales phone number */

	/* ---------- Spacing (4px base) ---------- */
	--space-1:  4px;   /* icon-to-label gap */
	--space-2:  8px;   /* eyebrow to heading */
	--space-3:  12px;  /* input padding, list gaps */
	--space-4:  16px;  /* mobile gutter, gaps inside cards */
	--space-6:  24px;  /* card padding, button padding, grid gutter */
	--space-8:  32px;  /* heading to content, desktop card padding */
	--space-12: 48px;  /* between blocks inside a section */
	--space-18: 72px;  /* section padding on mobile */
	--space-24: 96px;  /* section padding on desktop */

	/* ---------- Radius ---------- */
	--radius-sm:   3px;    /* inputs, tags */
	--radius-md:   5px;    /* buttons */
	--radius-lg:   12px;   /* cards, images, bands */
	--radius-full: 9999px; /* discs, the logo roundel */

	/* ---------- Shadow ---------- */
	--shadow-sm:   0 1px 2px #231f2014, 0 2px 6px #231f200f; /* sticky header once scrolled */
	--shadow-lg:   0 12px 32px -8px #231f202e;               /* card hover, menus */
	--focus-ring:  0 0 0 2px #ffffff, 0 0 0 4px #231f20;     /* keyboard focus: white gap, charcoal ring */

	/* ---------- Layout ---------- */
	--container:     1200px;
	--measure:       68ch;
	--header-height: 64px; /* 80px from 768px, set below */
}

@media (min-width: 48em) {
	:root { --header-height: 80px; }
}

/* ==========================================================================
   Theme extensions (not in the design system yet)
   ========================================================================== */
:root {
	--gutter:        16px;                                  /* page side gutter: space-4 mobile, space-6 desktop */
	--grid-gap:      24px;                                  /* space-6 */
	--section-space: clamp(72px, 48px + 5vw, 96px);         /* space-18 on phones to space-24 on desktop */
	--container-narrow: 46rem;                              /* reading column for articles */

	--error:         #b30000; /* form errors only (7.2:1 on white), always with an icon and text. The system defines no status colours yet */

	--ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
	--dur-fast:  150ms;
	--dur:       200ms;
	--dur-slow:  320ms;

	--z-sticky-bar: 90;
	--z-header:     100;
	--z-dropdown:   110;
	--z-drawer:     200;
}

@media (min-width: 48em) {
	:root { --gutter: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	:root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}