/*
  wbs-pages/_shared/_tokens.css

  Woods Business Solutions design tokens for the migrated HTML pages.
  Mirrors the WBS design system (colors_and_type.css): strict palette,
  Cubron Grotesk 300/600, generous type scale, 4-based spacing, soft
  radii and precise motion. Dark mode is the default; one lime moment
  per view.

  The underscore filename sorts this file before wbs-marketing.css and
  every page stylesheet (assets are glob-sorted), so tokens are always
  defined first.

  Scoping: custom properties live on :root (inert on their own). Every
  rule that paints or sets type is anchored to .wbs-html-page or
  body.wbs-html-page-template, so nothing leaks into the remaining
  Elementor pages. Element selectors are wrapped in :where() to keep
  specificity at a single class; component and page stylesheets loaded
  later win ties.

  Author: Woods Business Solutions
*/

/* ------------------------------------------------------------------ */
/* Self-hosted brand font (300 body, 600 headings; nothing else)      */
/* ------------------------------------------------------------------ */
@font-face {
	font-family: 'Cubron Grotesk';
	src: url('fonts/CubronGrotesk-Light.otf') format('opentype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Cubron Grotesk';
	src: url('fonts/CubronGrotesk-LightItalic.otf') format('opentype');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Cubron Grotesk';
	src: url('fonts/CubronGrotesk-SemiBold.otf') format('opentype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ------------------------------------------------------------------ */
/* Design tokens                                                      */
/* ------------------------------------------------------------------ */
:root {
	/* Brand palette (strict; use these exact values) */
	--wbs-dark:        #232323;
	--wbs-lime:        #CAF1A2;
	--wbs-blue-grey:   #363C46;
	--wbs-light-grey:  #E8E8E8;
	--wbs-white:       #FFFFFF;
	--wbs-black:       #0F0F0F;

	--wbs-lime-hover:  #B8E08F;
	--wbs-lime-soft:   #E5F8D4;

	/* Semantic surfaces (dark-first) */
	--surface-bg:      var(--wbs-dark);
	--surface-raised:  var(--wbs-blue-grey);
	--surface-inverse: var(--wbs-light-grey);
	--hairline:        rgba(255, 255, 255, 0.08);
	--hairline-strong: rgba(255, 255, 255, 0.16);
	--hairline-dark:   rgba(15, 15, 15, 0.08);

	/* Semantic text */
	--fg-1:            var(--wbs-white);
	--fg-2:            rgba(255, 255, 255, 0.72);
	--fg-3:            rgba(255, 255, 255, 0.52);
	--fg-accent:       var(--wbs-lime);
	--fg-on-light-1:   var(--wbs-dark);
	--fg-on-light-2:   rgba(35, 35, 35, 0.68);
	--fg-on-light-3:   rgba(35, 35, 35, 0.48);

	/* Overlays */
	--overlay-image:   rgba(35, 35, 35, 0.5);
	--overlay-scrim:   rgba(35, 35, 35, 0.88);

	/* Type */
	--font-sans: 'Cubron Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

	--fw-light: 300;
	--fw-semi:  600;

	--fs-hero:    clamp(56px, 7.2vw, 104px);
	--fs-h1:      clamp(40px, 4.6vw, 64px);
	--fs-h2:      clamp(32px, 3.2vw, 44px);
	--fs-h3:      28px;
	--fs-h4:      22px;
	--fs-body-lg: 20px;
	--fs-body:    17px;
	--fs-body-sm: 15px;
	--fs-caption: 13px;
	--fs-eyebrow: 13px; /* sentence case; never all-caps */

	--lh-tight:  1.04;
	--lh-snug:   1.18;
	--lh-normal: 1.5;
	--lh-loose:  1.65;

	--ls-hero:  -0.02em; /* h1 and hero only */
	--ls-tight: -0.01em;
	--ls-normal: 0;

	/* Spacing (4-based) */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--sp-8: 64px;
	--sp-9: 96px;
	--sp-10: 128px;

	/* Layout */
	--grid-max:        1200px;
	--grid-cols:       12;
	--grid-gutter:     32px;
	--section-py-desk: 96px;
	--section-py-mob:  64px;

	/* Radius (no sharp corners) */
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 16px;
	--r-xl: 24px;
	--r-pill: 999px;

	/* Elevation */
	--shadow-card:      0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.24);
	--shadow-raised:    0 2px 4px rgba(0, 0, 0, 0.32), 0 18px 48px rgba(0, 0, 0, 0.32);
	--shadow-lime:      0 4px 16px rgba(202, 241, 162, 0.30);
	--shadow-lime-soft: 0 2px 10px rgba(202, 241, 162, 0.18);

	/* Motion (precise, never bouncy) */
	--ease:       cubic-bezier(0.2, 0, 0.2, 1);
	--dur-fast:   120ms;
	--dur-base:   200ms;
	--dur-slow:   320ms;
	--hover-lift: translateY(-2px);
	--hover-scale: scale(1.02);
}

/* ------------------------------------------------------------------ */
/* Base canvas + typography, scoped to the WBS HTML page template     */
/* ------------------------------------------------------------------ */
body.wbs-html-page-template {
	margin: 0;
	background-color: var(--surface-bg);
}

.wbs-html-page {
	background-color: var(--surface-bg);
	color: var(--fg-1);
	font-family: var(--font-sans);
	font-weight: var(--fw-light);
	font-size: var(--fs-body);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Semantic type. :where() keeps these at class specificity so the
   component library and page styles (loaded later) win every tie. */
.wbs-html-page :where(h1) {
	margin: 0;
	font-weight: var(--fw-semi);
	font-size: var(--fs-h1);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-hero);
}

.wbs-html-page :where(h2) {
	margin: 0;
	font-weight: var(--fw-semi);
	font-size: var(--fs-h2);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
}

.wbs-html-page :where(h3) {
	margin: 0;
	font-weight: var(--fw-semi);
	font-size: var(--fs-h3);
	line-height: var(--lh-snug);
}

.wbs-html-page :where(h4, h5, h6) {
	margin: 0;
	font-weight: var(--fw-semi);
	font-size: var(--fs-h4);
	line-height: var(--lh-snug);
}

.wbs-html-page :where(p) {
	font-weight: var(--fw-light);
}

.wbs-html-page :where(strong, b) {
	font-weight: var(--fw-semi);
}

.wbs-html-page :where(a) {
	color: inherit;
	text-decoration: none;
}

.wbs-html-page :where(code, pre, kbd) {
	font-family: var(--font-mono);
	font-size: 0.92em;
}

.wbs-html-page ::selection {
	background: var(--wbs-lime);
	color: var(--wbs-dark);
}

/* Focus ring: 2px canvas gap + 4px lime */
.wbs-html-page :focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--wbs-dark), 0 0 0 4px var(--wbs-lime);
}

/* ------------------------------------------------------------------ */
/* Defensive button reset.                                            */
/* hello-elementor's reset.css paints EVERY <button> with a crimson   */
/* border + text (`button { border:1px solid #CC3366; color:#CC3366 }`)*/
/* which bleeds into our controls (tabs, accordion triggers, carousel */
/* arrows). Red is NOT in the WBS palette. :where() keeps this at      */
/* class specificity (.wbs-html-page = 0,1,0) so it beats the theme's  */
/* element rule (0,0,1) but still loses to every .wbs-m-* component    */
/* rule (also 0,1,0, and loaded later in wbs-marketing.css), which     */
/* re-establishes the correct lime/hairline styling.                  */
.wbs-html-page :where(button, [type="button"], [type="submit"], [type="reset"]) {
	background-color: transparent;
	border-color: transparent;
	color: inherit;
}

/* Reduced motion: settle instantly, never animate */
@media (prefers-reduced-motion: reduce) {
	.wbs-html-page *,
	.wbs-html-page *::before,
	.wbs-html-page *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}