/*!
 * Preco Quote Engine — design tokens
 * ===========================================================================
 *
 * WHY TOKENS LIVE ON `.preco` AND NOT ON `:root`
 * ---------------------------------------------------------------------------
 * A theme, Elementor Global Styles or another plugin can and does write to
 * `:root`. Anything this plugin declared there would be redefinable by code it
 * does not control, which is exactly the coupling the plugin is required not
 * to have. Declaring the tokens on the plugin's own root scope class means a
 * theme cannot reach them: to redefine `--preco-brand-primary` you have to
 * target `.preco` deliberately, which is a supported customisation rather than
 * an accident.
 *
 * SPECIFICITY CONVENTION — read this before adding a rule
 * ---------------------------------------------------------------------------
 *   .preco                      (0,1,0)  token declaration only
 *   .preco.preco                (0,2,0)  root-level inherited properties
 *   .preco.preco *              (0,2,0)  the scoped reset
 *   .preco.preco .preco-thing   (0,3,0)  every component rule
 *
 * The root class is doubled so that plugin rules outrank the single-class plus
 * element selectors themes and Elementor emit (`.elementor-widget-container p`
 * is (0,1,1); Hello Elementor's `.site-header h1` is (0,1,1)). Component rules
 * carry one class more than the reset, so a component always beats the reset
 * without relying on source order. Nothing here needs `!important`.
 *
 * NAMING CONVENTION
 * ---------------------------------------------------------------------------
 * BEM, prefixed, lowercase, hyphen separated:
 *
 *   .preco-calculator                block
 *   .preco-calculator__line          element
 *   .preco-calculator--compact       modifier
 *   .preco-is-loading                state (always paired with a block)
 *   .preco-u-visually-hidden         utility
 *
 * Token names read  --preco-<group>-<role>[-<variant>].
 *
 * Every selector in every plugin stylesheet begins with `.preco`. There is no
 * un-namespaced element selector anywhere: form controls and headings are
 * reset as `.preco.preco input`, never as `input`.
 *
 * BREAKPOINTS
 * ---------------------------------------------------------------------------
 * The eleven widths the plugin is designed and verified at are declared below
 * as tokens, for documentation and for JavaScript that needs to agree with the
 * CSS. Custom properties cannot be used inside a media query, so the queries
 * themselves carry literals; the two must be edited together.
 *
 * Active layout breakpoints (min-width): 480, 768, 1024, 1280, 1440, 1920.
 * Verification-only widths: 320, 360, 375, 390, 414. No query fires at these;
 * the layout at each is the base layout and is checked for overflow.
 *
 * Elementor's own breakpoints are mirrored deliberately (specification 20):
 * mobile below 768, tablet 768 to 1024, desktop above 1024.
 *
 * @package Preco\QuoteEngine
 */

.preco {
	/* ----------------------------------------------------------------- *
	 * Brand palette. Specification 2.4 and the Preco brand guideline.
	 * ----------------------------------------------------------------- */
	--preco-brand-primary: #2470b8;         /* Cobalt Blue, primary */
	--preco-brand-primary-hover: #1d5e9c;
	--preco-brand-primary-active: #185792;
	--preco-brand-primary-soft: #eef4fa;    /* tinted ground */
	--preco-brand-primary-border: #d3e2f1;  /* derived tint, 20% */
	--preco-brand-black: #0a0a0a;           /* Black */
	--preco-brand-cerulean: #4091ce;        /* secondary */
	--preco-brand-indigo: #545a90;          /* secondary */
	--preco-brand-slate: #6377b9;           /* secondary */
	--preco-whatsapp: #25d366;              /* mark and float ground */
	--preco-whatsapp-strong: #1e7a42;       /* accessible text variant */
	--preco-whatsapp-strong-hover: #176234;

	/* ----------------------------------------------------------------- *
	 * Neutral ramp. Taken from the approved design, not invented.
	 * ----------------------------------------------------------------- */
	--preco-white: #ffffff;
	--preco-n-50: #f8f9fa;
	--preco-n-100: #f5f6f7;
	--preco-n-150: #f0f1f2;
	--preco-n-200: #edeff1;
	--preco-n-300: #e5e7eb;
	--preco-n-400: #d5d9dd;
	--preco-n-500: #c9cdd2;
	--preco-n-600: #9aa0a8;
	--preco-n-700: #8a9099;
	--preco-n-800: #6b7280;
	--preco-n-850: #52585f;
	--preco-n-900: #2b2f34;
	--preco-n-950: #1e2125;
	--preco-black: #0a0a0a;

	/* ----------------------------------------------------------------- *
	 * Semantic colour. Components reference these, never the ramp.
	 * ----------------------------------------------------------------- */
	--preco-ink: var(--preco-black);
	--preco-ink-body: var(--preco-n-900);
	--preco-ink-muted: var(--preco-n-850);
	--preco-ink-subtle: var(--preco-n-700);
	--preco-ink-inverse: var(--preco-white);
	--preco-ink-link: var(--preco-brand-primary);
	--preco-ink-link-hover: var(--preco-brand-primary-hover);

	--preco-surface: var(--preco-white);
	--preco-surface-raised: var(--preco-white);
	--preco-surface-sunken: var(--preco-n-100);
	--preco-surface-muted: var(--preco-n-200);
	--preco-surface-inverse: var(--preco-black);

	--preco-border: var(--preco-n-300);
	--preco-border-strong: var(--preco-n-400);
	--preco-border-input: var(--preco-n-500);
	--preco-border-inverse: rgba(255, 255, 255, 0.18);

	/* ----------------------------------------------------------------- *
	 * Status. Error ink is fixed by specification 20.
	 * ----------------------------------------------------------------- */
	--preco-danger: #b0343c;
	--preco-danger-strong: #8e2a31;
	--preco-danger-soft: #fdf2f3;
	--preco-danger-border: #eccdd0;
	--preco-success: #1e7a42;
	--preco-success-soft: #edfaef;
	--preco-success-border: #c6e8d1;
	--preco-warning: #e0a93f;
	--preco-warning-soft: #fdf6e8;
	--preco-warning-border: #f0ddb4;
	--preco-info: var(--preco-brand-primary);
	--preco-info-soft: var(--preco-brand-primary-soft);
	--preco-info-border: var(--preco-brand-primary-border);

	/* ----------------------------------------------------------------- *
	 * Typography. The stack is declared, never inherited. The quoted
	 * families load only when the brand webfonts have been supplied
	 * (see assets/fonts/README.md); until then the fallbacks carry it.
	 * ----------------------------------------------------------------- */
	--preco-font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--preco-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	/* Mobile-first sizes. Overridden at 768px for tablet and desktop. */
	--preco-fs-display: clamp(32px, 7vw, 44px);
	--preco-fs-h1: 26px;
	--preco-fs-h2: 22px;
	--preco-fs-h3: 18px;
	--preco-fs-h4: 16px;
	--preco-fs-body-lg: 17px;
	--preco-fs-body: 16px;
	--preco-fs-small: 14px;
	--preco-fs-label: 13px;
	--preco-fs-caption: 11.5px;
	--preco-fs-button: 15px;
	--preco-fs-form: 16px;    /* 16px on mobile prevents the iOS zoom-on-focus */
	--preco-fs-feedback: 13.5px;

	--preco-lh-tight: 1.12;
	--preco-lh-snug: 1.25;
	--preco-lh-normal: 1.5;
	--preco-lh-relaxed: 1.65;

	--preco-fw-regular: 400;
	--preco-fw-medium: 500;
	--preco-fw-semibold: 600;
	--preco-fw-bold: 700;
	--preco-fw-heavy: 800;

	--preco-ls-tight: -0.02em;
	--preco-ls-normal: 0;
	--preco-ls-wide: 0.02em;
	--preco-ls-label: 0.08em;
	--preco-ls-caps: 0.12em;

	/* ----------------------------------------------------------------- *
	 * Spacing.
	 * ----------------------------------------------------------------- */
	--preco-space-1: 2px;
	--preco-space-2: 4px;
	--preco-space-3: 6px;
	--preco-space-4: 8px;
	--preco-space-5: 10px;
	--preco-space-6: 12px;
	--preco-space-7: 16px;
	--preco-space-8: 20px;
	--preco-space-9: 24px;
	--preco-space-10: 32px;
	--preco-space-11: 40px;
	--preco-space-12: 48px;
	--preco-space-13: 56px;
	--preco-space-14: 64px;
	--preco-space-15: 80px;
	--preco-space-16: 96px;

	/* ----------------------------------------------------------------- *
	 * Radius. Specification 2.4 fixes the range at 2 to 4px.
	 * ----------------------------------------------------------------- */
	--preco-radius-xs: 2px;
	--preco-radius-sm: 3px;
	--preco-radius-md: 4px;
	--preco-radius-pill: 100px;
	--preco-radius-circle: 50%;

	/* ----------------------------------------------------------------- *
	 * Shadow. Long, low-opacity casts, as in the approved design.
	 * ----------------------------------------------------------------- */
	--preco-shadow-xs: 0 1px 2px rgba(10, 10, 10, 0.06);
	--preco-shadow-sm: 0 2px 6px -2px rgba(10, 10, 10, 0.12);
	--preco-shadow-md: 0 14px 34px -18px rgba(10, 10, 10, 0.26);
	--preco-shadow-lg: 0 22px 48px -24px rgba(10, 10, 10, 0.3);
	--preco-shadow-float: 0 10px 24px -8px rgba(10, 10, 10, 0.34);

	/* Veil laid over a control while its request is in flight. */
	--preco-overlay-veil: rgba(255, 255, 255, 0.6);
	--preco-overlay-scrim: rgba(10, 10, 10, 0.55);

	/* ----------------------------------------------------------------- *
	 * Focus. Specification 20: a visible ring meeting 3:1 contrast.
	 * #1d5e9c on white is 4.9:1, so the ring passes on every plugin
	 * surface and on the inverse surface via the -inverse variant.
	 * ----------------------------------------------------------------- */
	--preco-focus-color: #1d5e9c;
	--preco-focus-color-inverse: #ffffff;
	--preco-focus-width: 2px;
	--preco-focus-offset: 2px;

	/* ----------------------------------------------------------------- *
	 * Controls. 44px is the minimum interactive target, declared once
	 * here so every later component inherits it (specification 20,
	 * AC-14). Mobile primary buttons step up to 48px.
	 * ----------------------------------------------------------------- */
	--preco-tap-min: 44px;
	--preco-control-h: 44px;
	--preco-control-h-lg: 48px;
	--preco-control-px: var(--preco-space-6);
	--preco-control-border: 1px;
	--preco-control-radius: var(--preco-radius-sm);

	/* ----------------------------------------------------------------- *
	 * Containers. Content caps at 1280px, centred above that, with no
	 * additional internal horizontal padding once capped
	 * (specification 20). The gutter steps down to 0 at the cap and is
	 * redeclared per breakpoint below.
	 * ----------------------------------------------------------------- */
	--preco-container-max: 1280px;
	--preco-container-narrow: 720px;
	--preco-container-wide: 1440px;
	--preco-gutter: 20px;      /* below 768px */
	--preco-modal-max: 470px;

	/* ----------------------------------------------------------------- *
	 * Breakpoints. Documentation and JavaScript only; see the header.
	 * ----------------------------------------------------------------- */
	--preco-bp-320: 320px;
	--preco-bp-360: 360px;
	--preco-bp-375: 375px;
	--preco-bp-390: 390px;
	--preco-bp-414: 414px;
	--preco-bp-480: 480px;
	--preco-bp-768: 768px;
	--preco-bp-1024: 1024px;
	--preco-bp-1280: 1280px;
	--preco-bp-1440: 1440px;
	--preco-bp-1920: 1920px;

	/* ----------------------------------------------------------------- *
	 * Motion. Zeroed under prefers-reduced-motion, below.
	 * ----------------------------------------------------------------- */
	--preco-duration-fast: 120ms;
	--preco-duration-base: 180ms;
	--preco-duration-slow: 260ms;
	--preco-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--preco-transition-fast: var(--preco-duration-fast) var(--preco-ease);
	--preco-transition-base: var(--preco-duration-base) var(--preco-ease);

	/* ----------------------------------------------------------------- *
	 * Stacking. Kept below the WordPress admin bar (99999) and below
	 * Elementor's editor chrome, so nothing of the plugin's can cover
	 * site or editor controls.
	 * ----------------------------------------------------------------- */
	--preco-z-base: 1;
	--preco-z-raised: 10;
	--preco-z-dropdown: 100;
	--preco-z-sticky: 200;
	--preco-z-float: 800;
	--preco-z-backdrop: 900;
	--preco-z-modal: 1000;
	--preco-z-toast: 1100;
}

/* Tablet and desktop type scale, and the tablet gutter. */
@media (min-width: 768px) {

	.preco {
		--preco-fs-display: clamp(38px, 4.4vw, 52px);
		--preco-fs-h1: 34px;
		--preco-fs-h2: 26px;
		--preco-fs-h3: 20px;
		--preco-fs-h4: 17px;
		--preco-fs-body-lg: 16px;
		--preco-fs-body: 15px;
		--preco-fs-small: 13.5px;
		--preco-fs-label: 12.5px;
		--preco-fs-caption: 11px;
		--preco-fs-button: 14px;
		--preco-fs-form: 15px;
		--preco-fs-feedback: 13px;
		--preco-gutter: 24px;
	}
}

/*
 * At and above the cap the container is exactly 1280px wide and centred, with
 * no internal horizontal padding. Below the cap the gutter keeps content clear
 * of the viewport edge.
 */
@media (min-width: 1280px) {

	.preco {
		--preco-gutter: 0px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.preco {
		--preco-duration-fast: 0ms;
		--preco-duration-base: 0ms;
		--preco-duration-slow: 0ms;
	}
}