/* ---------------------------------------------------------------------------
 * GENERATED FILE — DO NOT EDIT HERE.
 *
 * Source: design/tokens.css
 * Sync:   python tools/sync-theme-css.py
 *
 * Edits made in this copy are lost on the next sync and are invisible to the
 * prototypes in design/prototypes/, which read the source directly.
 * ------------------------------------------------------------------------ */

/**
 * Mervia Group — design tokens
 * Single source of truth for colour, type, space, elevation and motion.
 *
 * Rules:
 * 1. No raw hex / px values anywhere outside this file. Components consume tokens only.
 * 2. Primitive tokens (--co-<scale>-<step>) are never used directly in components.
 *    Components use semantic tokens (--co-color-text, --co-space-gutter, ...).
 * 3. Editing happens here, in design/. The theme copy is generated, never edited in place.
 *
 * Naming: --co-<category>-<role>-<modifier>
 */

:root {
	/* ==========================================================================
	   1. COLOUR — primitives
	   ==========================================================================
	   Palette rationale: every EU packaging wholesaler uses corporate blue or
	   eco-green. Mervia Group uses slate + ember: slate reads engineered and
	   industrial, ember reads kiln, copper, workshop — the craft half of the
	   name. It also guarantees the CTA never collides with a competitor look.
	   ---------------------------------------------------------------------- */

	/* Slate — structural dark. Cool, slightly cyan, never pure black. */
	--co-slate-900: #0e1a1f; /* header, footer, hero overlays */
	--co-slate-800: #16262d;
	--co-slate-700: #1f3a44;
	--co-slate-600: #2c4c58;
	--co-slate-500: #3d6472;
	--co-slate-400: #5b8290;

	/* Stone — warm neutrals. Paper, borders, muted text. Warm on purpose:
	   pure grey next to slate reads dead; warm grey reads like kraft board. */
	--co-stone-050: #faf9f7; /* page background */
	--co-stone-100: #f2efea; /* section band background */
	--co-stone-200: #e5e0d8; /* hairline borders */
	--co-stone-300: #d2cabe;
	--co-stone-400: #a8a094;
	--co-stone-500: #7b7468;
	--co-stone-600: #55666e; /* muted body text — 5.5:1 on stone-050 */

	/* Ember — the single accent. CTA, active state, key data highlight.
	   Used sparingly: if everything is ember, nothing is. */
	--co-ember-700: #8f3c05;
	--co-ember-600: #a34506; /* hover — 6.2:1 with white */
	--co-ember-500: #c2540a; /* base CTA — 4.6:1 with white, passes AA */
	--co-ember-200: #f2cdb0;
	--co-ember-050: #fdf3ea;

	/* Copper — secondary warm, for editorial accents and chart series 2. */
	--co-copper-600: #8a5a33;
	--co-copper-100: #efe3d7;

	/* Semantic status */
	--co-green-600: #1c6b48; /* in stock, certified, compliant */
	--co-green-050: #eaf4ef;
	--co-amber-600: #96690b; /* lead time warning, conditional */
	--co-amber-050: #fbf3e0;
	--co-red-600: #a32424; /* form error, non-compliant */
	--co-red-050: #fbecec;
	--co-blue-600: #1d5c8c; /* informational note, links in prose */
	--co-blue-050: #eaf2f8;

	--co-white: #ffffff;

	/* ==========================================================================
	   2. COLOUR — semantic (components use these)
	   ========================================================================== */

	/* Surfaces */
	--co-color-canvas: var(--co-stone-050);
	--co-color-surface: var(--co-white);
	--co-color-surface-sunken: var(--co-stone-100);
	--co-color-surface-inverse: var(--co-slate-900);
	--co-color-surface-accent: var(--co-ember-050);

	/* Text */
	--co-color-text: var(--co-slate-900);
	--co-color-text-muted: var(--co-stone-600);
	--co-color-text-subtle: var(--co-stone-500);
	--co-color-text-inverse: var(--co-white);
	--co-color-text-inverse-muted: #a9bcc4;
	--co-color-text-link: var(--co-blue-600);
	--co-color-text-link-hover: var(--co-ember-600);

	/* Lines */
	--co-color-border: var(--co-stone-200);
	--co-color-border-strong: var(--co-stone-300);
	--co-color-border-inverse: rgba(255, 255, 255, 0.16);
	--co-color-rule: var(--co-stone-200);

	/* Interactive */
	--co-color-action: var(--co-ember-500);
	--co-color-action-hover: var(--co-ember-600);
	--co-color-action-active: var(--co-ember-700);
	--co-color-action-text: var(--co-white);
	--co-color-action-quiet: var(--co-slate-700);
	--co-color-action-quiet-hover: var(--co-slate-900);
	--co-color-focus: var(--co-slate-500);

	/* Status */
	--co-color-success: var(--co-green-600);
	--co-color-success-bg: var(--co-green-050);
	--co-color-warning: var(--co-amber-600);
	--co-color-warning-bg: var(--co-amber-050);
	--co-color-danger: var(--co-red-600);
	--co-color-danger-bg: var(--co-red-050);
	--co-color-info: var(--co-blue-600);
	--co-color-info-bg: var(--co-blue-050);

	/* ==========================================================================
	   3. TYPOGRAPHY
	   ==========================================================================
	   Two families only. Inter for everything structural (full Latin-Ext, so
	   German umlauts and Dutch ij render from the same file). Source Serif for
	   long-form Resources articles, where a serif measurably helps past 900 words.
	   Fonts are self-hosted in step 21 — no Google Fonts request (GDPR in DE).
	   ---------------------------------------------------------------------- */

	--co-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--co-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
	--co-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
		monospace;

	/* Fluid scale, 1.25 ratio at desktop, compressed to 1.2 at mobile so long
	   German compounds (Verpackungsherstellung) still fit a 320px viewport. */
	--co-text-2xs: 0.6875rem; /* 11px — table units, superscripts */
	--co-text-xs: 0.78125rem; /* 12.5px — eyebrows, badges, captions */
	--co-text-sm: 0.875rem; /* 14px — meta, table body, form help */
	--co-text-base: 1.0625rem; /* 17px — body. 17 not 16: B2B specs get read on desktop */
	--co-text-md: clamp(1.125rem, 1.06rem + 0.28vw, 1.25rem); /* lead paragraph */
	--co-text-lg: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem); /* h4 */
	--co-text-xl: clamp(1.4375rem, 1.28rem + 0.7vw, 1.875rem); /* h3 */
	--co-text-2xl: clamp(1.6875rem, 1.42rem + 1.15vw, 2.375rem); /* h2 */
	--co-text-3xl: clamp(2rem, 1.55rem + 1.95vw, 3rem); /* h1 */
	--co-text-4xl: clamp(2.375rem, 1.7rem + 2.9vw, 3.75rem); /* hero */

	--co-weight-regular: 400;
	--co-weight-medium: 500;
	--co-weight-semibold: 600;
	--co-weight-bold: 700;

	--co-leading-none: 1;
	--co-leading-tight: 1.15; /* display headings */
	--co-leading-snug: 1.3; /* h3/h4, card titles */
	--co-leading-normal: 1.6; /* body */
	--co-leading-relaxed: 1.75; /* long-form article body */

	--co-tracking-tight: -0.02em; /* large headings only */
	--co-tracking-normal: 0;
	--co-tracking-wide: 0.06em; /* eyebrows, small-caps labels */
	--co-tracking-wider: 0.1em;

	/* Measure. 68ch for articles, 46ch for lead paragraphs and cards. */
	--co-measure: 68ch;
	--co-measure-short: 46ch;

	/* ==========================================================================
	   4. SPACE — 4px base grid
	   ========================================================================== */

	--co-space-0: 0;
	--co-space-1: 0.25rem; /* 4 */
	--co-space-2: 0.5rem; /* 8 */
	--co-space-3: 0.75rem; /* 12 */
	--co-space-4: 1rem; /* 16 */
	--co-space-5: 1.5rem; /* 24 */
	--co-space-6: 2rem; /* 32 */
	--co-space-7: 2.5rem; /* 40 */
	--co-space-8: 3rem; /* 48 */
	--co-space-9: 4rem; /* 64 */
	--co-space-10: 5rem; /* 80 */
	--co-space-11: 6.5rem; /* 104 */
	--co-space-12: 8rem; /* 128 */

	/* Composite spacing roles */
	--co-space-gutter: clamp(1rem, 0.6rem + 2vw, 2rem); /* page side padding */
	--co-space-section: clamp(3rem, 2rem + 5vw, 6.5rem); /* vertical section rhythm */
	--co-space-section-tight: clamp(2rem, 1.4rem + 3vw, 4rem);
	--co-space-stack: var(--co-space-4); /* default gap between flow items */

	/* ==========================================================================
	   5. LAYOUT
	   ========================================================================== */

	--co-container: 1240px; /* default content width */
	--co-container-wide: 1440px; /* hero, mega-menu, full-bleed grids */
	--co-container-narrow: 820px; /* articles, forms, legal */
	--co-grid-gap: clamp(1rem, 0.7rem + 1.4vw, 2rem);
	--co-header-height: 4.5rem; /* 72px — sticky offset for anchors */
	--co-header-height-compact: 3.75rem; /* after scroll */
	--co-utility-bar-height: 2.25rem;

	/* ==========================================================================
	   6. BORDER RADIUS
	   ==========================================================================
	   Deliberately tight. Industrial supply, not a SaaS dashboard. Nothing above
	   6px except pills — rounded corners on a spec table read as consumer app.
	   ---------------------------------------------------------------------- */

	--co-radius-none: 0;
	--co-radius-sm: 2px;
	--co-radius-md: 4px;
	--co-radius-lg: 6px;
	--co-radius-pill: 999px;

	/* ==========================================================================
	   7. BORDERS & ELEVATION
	   ==========================================================================
	   Cards are defined by hairlines, not drop shadows. Shadow is reserved for
	   things that genuinely float: mega-menu, sticky bar, modal, dropdown.
	   ---------------------------------------------------------------------- */

	--co-border-width: 1px;
	--co-border-width-thick: 2px;
	--co-border-accent-width: 3px; /* left rule on callouts and active nav */

	--co-shadow-xs: 0 1px 2px rgba(14, 26, 31, 0.06);
	--co-shadow-sm: 0 1px 3px rgba(14, 26, 31, 0.08), 0 1px 2px rgba(14, 26, 31, 0.04);
	--co-shadow-md: 0 4px 12px rgba(14, 26, 31, 0.09), 0 1px 3px rgba(14, 26, 31, 0.05);
	--co-shadow-lg: 0 12px 32px rgba(14, 26, 31, 0.13), 0 2px 8px rgba(14, 26, 31, 0.06);
	--co-shadow-menu: 0 16px 40px rgba(14, 26, 31, 0.16);
	--co-focus-ring: 0 0 0 3px rgba(61, 100, 114, 0.4);

	/* ==========================================================================
	   8. MOTION
	   ==========================================================================
	   Fast and unfussy. B2B buyers open 14 tabs; animation is latency to them.
	   ---------------------------------------------------------------------- */

	--co-duration-instant: 90ms;
	--co-duration-fast: 150ms;
	--co-duration-base: 220ms;
	--co-duration-slow: 360ms;
	--co-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--co-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--co-transition-base: var(--co-duration-fast) var(--co-ease-out);

	/* ==========================================================================
	   9. Z-INDEX
	   ========================================================================== */

	--co-z-base: 1;
	--co-z-raised: 10;
	--co-z-sticky-cta: 60; /* mobile sticky quote bar */
	--co-z-header: 100;
	--co-z-megamenu: 110;
	--co-z-overlay: 200;
	--co-z-modal: 210;
	--co-z-toast: 300;
	--co-z-skiplink: 400;

	/* ==========================================================================
	   10. COMPONENT-LEVEL TOKENS
	   ========================================================================== */

	--co-control-height: 2.875rem; /* 46px — inputs and buttons, touch-safe */
	--co-control-height-sm: 2.25rem;
	--co-control-padding-x: var(--co-space-4);
	--co-table-row-padding: var(--co-space-3) var(--co-space-4);
	--co-card-padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	--co-icon-sm: 1rem;
	--co-icon-md: 1.25rem;
	--co-icon-lg: 1.75rem;
}

/* Breakpoints cannot live in custom properties (media queries cannot read them).
   Documented here so every file uses the same six numbers:
     xs  480px   phone landscape
     sm  640px   large phone
     md  768px   tablet portrait
     lg  1024px  small laptop — mobile menu ends, mega-menu begins
     xl  1280px  desktop
     2xl 1440px  wide desktop
   Also mirrored in design/tokens.json for the image generator and JS. */

/* Respect the OS setting. Every transition in the system degrades to none. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--co-duration-instant: 0ms;
		--co-duration-fast: 0ms;
		--co-duration-base: 0ms;
		--co-duration-slow: 0ms;
	}
}

/* Print: strip colour and shadow, keep structure. Buyers print spec sheets. */
@media print {
	:root {
		--co-color-canvas: #fff;
		--co-color-surface: #fff;
		--co-color-surface-sunken: #fff;
		--co-color-text: #000;
		--co-color-text-muted: #333;
		--co-color-border: #999;
		--co-shadow-xs: none;
		--co-shadow-sm: none;
		--co-shadow-md: none;
		--co-shadow-lg: none;
		--co-shadow-menu: none;
	}
}