/* ==========================================================================
   KONVEX DESIGN TOKENS
   --------------------------------------------------------------------------
   Source: Konvex canonical token system (resources/css/konvex-tokens.css,
   "Phase 2 consolidated") — neo-brutalist: yellow on black, Bebas Neue /
   Bricolage Grotesque / Space Mono, 2px black borders, square corners,
   hard offset shadows.

   Section A holds the brand's raw values exactly as defined at source.
   Section B maps them onto the semantic slots the theme's components use.
   Components (main.css) only ever read section B.
   ========================================================================== */

:root {
	/* ======================================================================
	   A. BRAND PRIMITIVES (verbatim from konvex-tokens.css)
	   ====================================================================== */
	--kx-color-yellow: #FFE000;
	--kx-color-yellow-dark: #E6C800;
	--kx-color-black: #0A0A0A;
	--kx-color-white: #FFFFFF;
	--kx-color-gray: #F2F2F2;
	--kx-color-gray-mid: #D0D0D0;
	--kx-color-gray-dark: #555555;
	--kx-color-gray-333: #333333;
	--kx-color-gray-888: #888888;

	/* ======================================================================
	   B. SEMANTIC TOKENS (what components use)
	   ====================================================================== */

	/* Actions */
	--kx-color-primary: var(--kx-color-yellow);          /* button fill */
	--kx-color-primary-hover: var(--kx-color-yellow);    /* brand hover = lift + hard shadow, not a colour change */
	--kx-color-on-primary: var(--kx-color-black);        /* text on yellow */
	--kx-color-primary-soft: #FFF8B3;                    /* tinted yellow panels */
	--kx-color-accent: var(--kx-color-yellow);           /* emphasis on dark backgrounds */
	--kx-color-highlight: var(--kx-color-yellow);        /* marker highlight behind text on light backgrounds */
	--kx-color-link: var(--kx-color-black);              /* links/text accents on light backgrounds (yellow text is unreadable on white) */
	--kx-color-focus: var(--kx-color-black);

	/* Funnel stages — flat fills with black text, to sit inside the yellow/black system.
	   Stage 01 is the brand yellow; 05 is WhatsApp green. */
	--kx-stage-discover: #FFE000;
	--kx-stage-consider: #C9B8FF;
	--kx-stage-land: #8FE3CF;
	--kx-stage-convert: #FFB38A;
	--kx-stage-recover: #25D366;
	--kx-on-stage: var(--kx-color-black);

	/* Surfaces & text */
	--kx-color-bg: var(--kx-color-white);
	--kx-color-surface: var(--kx-color-white);
	--kx-color-surface-alt: var(--kx-color-gray);
	--kx-color-ink: var(--kx-color-black);
	--kx-color-ink-soft: #141414;
	--kx-color-text: var(--kx-color-black);
	--kx-color-text-muted: var(--kx-color-gray-dark);
	--kx-color-text-inverse: var(--kx-color-white);
	--kx-color-text-inverse-muted: var(--kx-color-gray-888);
	--kx-color-border: var(--kx-color-black);            /* card / control borders (brutalist 2px black) */
	--kx-color-border-soft: var(--kx-color-gray-mid);    /* dividers, tags */
	--kx-color-border-inverse: var(--kx-color-gray-333); /* borders on black */
	--kx-color-success: #1F9D55;
	--kx-color-danger: #E5484D;
	--kx-color-whatsapp: #25D366;

	/* Typography */
	--kx-font-display: 'Bebas Neue', sans-serif;          /* h1, h2, big numbers */
	--kx-font-heading: 'Bricolage Grotesque', sans-serif; /* h3, h4, card titles */
	--kx-font-body: 'Bricolage Grotesque', sans-serif;
	--kx-font-mono: 'Space Mono', monospace;              /* labels, eyebrows, tags */

	--kx-text-xs: 0.6875rem;   /* 11px — labels */
	--kx-text-sm: 0.8125rem;   /* 13px — card copy */
	--kx-text-base: 1rem;
	--kx-text-md: 1.0625rem;   /* 17px — hero/lead copy */
	--kx-text-lg: 1.125rem;    /* 18px — card titles */
	--kx-text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--kx-text-2xl: clamp(2.625rem, 1.8rem + 3vw, 4.5rem);  /* 42–72px Bebas (CTA title) */
	--kx-text-3xl: clamp(3rem, 1.8rem + 5vw, 5.625rem);    /* 48–90px Bebas (section title) */
	--kx-text-4xl: clamp(3.75rem, 1.5rem + 9vw, 8.125rem); /* 60–130px Bebas (hero) */

	--kx-weight-regular: 400;
	--kx-weight-medium: 500;
	--kx-weight-semibold: 600;
	--kx-weight-bold: 700;
	--kx-weight-display: 400;  /* Bebas Neue ships one weight */

	--kx-leading-tight: 0.92;
	--kx-leading-snug: 1.3;
	--kx-leading-body: 1.65;
	--kx-tracking-tight: -0.01em;
	--kx-tracking-wide: 0.2em;      /* Space Mono labels */
	--kx-tracking-button: 0.06em;
	--kx-transform-button: uppercase;

	/* Spacing (4px base — matches source scale) */
	--kx-space-1: 4px;
	--kx-space-2: 8px;
	--kx-space-3: 12px;
	--kx-space-4: 16px;
	--kx-space-5: 24px;
	--kx-space-6: 32px;
	--kx-space-7: 48px;
	--kx-space-8: 64px;
	--kx-space-9: 96px;
	--kx-section-y: clamp(60px, 40px + 4vw, 100px); /* source: 60 mobile / 80 tablet / 100 desktop */

	/* Radius — square corners throughout */
	--kx-radius-sm: 0;
	--kx-radius-md: 0;
	--kx-radius-lg: 0;
	--kx-radius-xl: 0;
	--kx-radius-pill: 0;
	--kx-border-width: 2px;

	/* Elevation — hard offset shadows, never blurred */
	--kx-shadow-sm: none;
	--kx-shadow-md: 6px 6px 0 var(--kx-color-black);
	--kx-shadow-lg: 8px 8px 0 var(--kx-color-black);
	--kx-hover-lift: translate(-3px, -3px);

	/* Motion & layout */
	--kx-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--kx-duration: 200ms;
	--kx-container: 1200px;
	--kx-container-narrow: 720px;
	--kx-gutter: clamp(20px, 2vw + 8px, 48px);
	--kx-header-h: 72px;

	/* Texture */
	--kx-grid-line: var(--kx-color-gray-mid); /* hero graph-paper grid */
	--kx-noise-opacity: 0.4;                  /* film-grain overlay; 0 to disable */
}