/* =========================================================================
   Design tokens

   The build started as a faithful reproduction of the old leadgenerashop
   theme, which had no system behind it: a flat 15/16px type scale, a single
   50px block rhythm and hard-coded hex values. This layer puts a real scale
   underneath while keeping the brand the client already has — Essentials
   yellow, black, Inter, square buttons.

   Palette values still come from Site Options, injected as --brand/--ink/etc.
   in inc/setup.php; everything below builds on those.
   ========================================================================= */

:root {
	/* ------------------------------------------------------------ Colour */
	--brand: #FFE100;
	--brand-ink: #000000;          /* text that sits on brand yellow        */
	--brand-dark: #E5CB00;         /* pressed / hover state for yellow      */

	--ink: #000000;
	--ink-2: #1E293B;              /* headings in UI chrome                 */
	--ink-3: #404040;              /* body text in dense UI                 */
	--muted: #4A4A4A;
	--muted-2: #767676;            /* meta, captions                        */

	--surface: #F8F8F8;
	--surface-2: #F1F1F1;          /* flyouts, hover fills                  */
	--white: #FFFFFF;

	--line: #E6E6E6;               /* default border                        */
	--line-2: #DDDDDD;             /* form control border                   */
	--line-3: #CFCFCF;             /* stronger divider                      */

	--accent: #02343F;
	--success: #2E7D32;
	--danger: #C0392B;

	/* -------------------------------------------------------------- Type */
	--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--text-xs:   0.75rem;   /* 12 — badges, counts                          */
	--text-sm:   0.875rem;  /* 14 — meta, table headers                     */
	--text-base: 1rem;      /* 16 — body                                    */
	--text-md:   1.0625rem; /* 17 — buttons                                 */
	--text-lg:   1.125rem;  /* 18 — lead, card titles                       */
	--text-xl:   clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);      /* 20–24      */
	--text-2xl:  clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);     /* 24–30      */
	--text-3xl:  clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem);     /* 30–40      */

	--leading-tight: 1.2;
	--leading-snug: 1.35;
	--leading-normal: 1.5;
	--leading-relaxed: 1.65;

	--tracking-tight: -0.01em;
	--tracking-wide: 0.04em;   /* uppercase eyebrows                        */

	/* ----------------------------------------------------------- Spacing */
	/* 4px base. Named by step so intent survives refactors. */
	--space-1: 0.25rem;   /*  4 */
	--space-2: 0.5rem;    /*  8 */
	--space-3: 0.75rem;   /* 12 */
	--space-4: 1rem;      /* 16 */
	--space-5: 1.5rem;    /* 24 */
	--space-6: 2rem;      /* 32 */
	--space-7: 2.5rem;    /* 40 */
	--space-8: 3.5rem;    /* 56 */
	--space-9: 4.5rem;    /* 72 */
	--space-10: 6rem;     /* 96 */

	/* Section rhythm, fluid so small screens do not waste height. */
	--section-sm: clamp(1.5rem, 3vw, 2.5rem);
	--section-md: clamp(2.5rem, 5vw, 4rem);
	--section-lg: clamp(4rem, 8vw, 6rem);

	/* ------------------------------------------------------------ Layout */
	--container: 1320px;
	--container-narrow: 820px;
	--gutter: clamp(1rem, 3vw, 1.5rem);

	/* ------------------------------------------------------------ Shape */
	/* Buttons stay square — that is the brand's signature. Surfaces get a
	   small radius so cards and inputs read as considered rather than raw. */
	--radius-none: 0;
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-pill: 999px;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, .07);
	--shadow-lg: 0 12px 32px rgba(0, 0, 0, .12);

	--ring: 0 0 0 3px rgba(255, 225, 0, .55);

	/* -------------------------------------------------------- Motion */
	--ease: cubic-bezier(.2, .6, .3, 1);
	--fast: 120ms;
	--base: 200ms;
}

@media (max-width: 1400px) { :root { --container: 1140px; } }
@media (max-width: 1200px) { :root { --container: 960px; } }
@media (max-width: 992px)  { :root { --container: 720px; } }
@media (max-width: 768px)  { :root { --container: 540px; } }
@media (max-width: 576px)  { :root { --container: 100%; } }

@media (prefers-reduced-motion: reduce) {
	:root { --fast: 1ms; --base: 1ms; }
}