/* ==========================================================================
   Wholesale Tire Theme - design tokens
   Single source of truth for colour, type, spacing, radius, shadow, motion.
   Nothing in the theme may hard-code a hex value, a font stack or a pixel
   spacing step. Everything references a token below.
   ========================================================================== */

:root {
	/* ---------------------------------------------------------------- colour
	   Brand palette expanded for the approved colourful visual upgrade. */
	--wt-navy: #073B67;
	--wt-navy-charcoal: #14202B;
	--wt-orange: #F05A18;
	--wt-red: #B5121B;
	--wt-graphite: #242629;
	--wt-steel: #7D838A;
	--wt-off-white: #F7F6F2;
	--wt-white: #FFFFFF;
	--wt-blue-bright: #117AC1;
	--wt-blue-electric: #24A7F2;
	--wt-orange-bright: #FF7A1A;
	--wt-orange-gold: #FFB347;

	/* Derived tints and shades, generated from the approved palette only. */
	--wt-navy-900: #052a4a;
	--wt-navy-700: #073B67;
	--wt-navy-500: #0d5490;
	--wt-navy-100: #e7eef5;
	--wt-navy-50: #f2f7fb;
	--wt-orange-700: #c9450c;
	--wt-orange-600: #d94e12;
	--wt-orange-hover: #F26A2A;
	--wt-orange-active: #EE5E22;
	--wt-orange-disabled: #F7C4AC;
	--wt-orange-100: #fdeee7;
	--wt-blue-100: #e8f6fe;
	--wt-steel-300: #c7cbd0;
	--wt-steel-200: #dfe2e6;
	--wt-steel-100: #eceef0;

	/* Semantic roles */
	--wt-bg: var(--wt-off-white);
	--wt-bg-raised: var(--wt-white);
	--wt-bg-dark: var(--wt-navy-charcoal);
	--wt-bg-navy: var(--wt-navy);
	--wt-text: var(--wt-graphite);
	--wt-text-muted: #5a6067;      /* Steel darkened to reach 4.5:1 on off-white. */
	--wt-text-on-dark: #f2f4f6;
	--wt-text-on-dark-muted: #b9c0c7;
	--wt-heading: var(--wt-navy);
	--wt-heading-on-dark: var(--wt-white);
	--wt-border: var(--wt-steel-200);
	--wt-border-strong: var(--wt-steel-300);
	--wt-link: var(--wt-navy);
	--wt-link-hover: var(--wt-navy-500);

	/* Action colours. Navy-charcoal text on orange reaches 4.86:1. */
	--wt-accent: var(--wt-orange);
	--wt-accent-hover: var(--wt-orange-hover);
	--wt-accent-active: var(--wt-orange-active);
	--wt-accent-disabled: var(--wt-orange-disabled);
	--wt-accent-label: var(--wt-navy-charcoal);
	--wt-accent-text: #b8430d;
	--wt-alert: var(--wt-red);
	--wt-good: #1c7a4a;

	/* Badge tints, derived from the semantic roles above. */
	--wt-good-bg: #e3f3ea;
	--wt-alert-bg: #fdeaeb;
	--wt-surface-blue: #eef7fd;
	--wt-surface-warm: #fff4eb;

	/* Print. Ink-on-paper only; not part of the screen palette. */
	--wt-print-bg: #ffffff;
	--wt-print-text: #000000;

	/* Editor-only placeholder markers. These are never downloaded by a
	   customer: placeholders.css is enqueued only for signed-in users who can
	   edit content. Amber is deliberately outside the brand palette so an
	   unfinished area is unmistakable in the admin preview. */
	--wt-ph-bg: #fff8e6;
	--wt-ph-border: #d99b00;
	--wt-ph-text: #6b4a00;
	--wt-ph-note: #7d6427;
	--wt-ph-hatch-a: #f3f1ea;
	--wt-ph-hatch-b: #eae7dd;

	/* ------------------------------------------------------------ typography
	   Web fonts are self-hosted and are NOT bundled in Phase 1. Until the
	   licensed files are approved and added to /assets/fonts/, the system stack
	   renders. The stacks below are ordered so the fallback metrics are close to
	   the intended faces, which limits layout shift on swap. */
	--wt-font-display: "Barlow Condensed", "Rajdhani", "Arial Narrow", Arial, system-ui, sans-serif;
	--wt-font-body: "Inter", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--wt-font-price: var(--wt-font-body);

	/* Fluid type scale. clamp() keeps mobile readable without media queries. */
	--wt-text-xs: 0.8125rem;
	--wt-text-sm: 0.875rem;
	--wt-text-base: 1rem;
	--wt-text-md: clamp(1.0625rem, 0.2vw + 1rem, 1.125rem);
	--wt-text-lg: clamp(1.25rem, 0.5vw + 1.1rem, 1.5rem);
	--wt-text-xl: clamp(1.5rem, 1vw + 1.25rem, 2rem);
	--wt-text-2xl: clamp(1.875rem, 2vw + 1.4rem, 2.75rem);
	--wt-text-3xl: clamp(2.25rem, 3.2vw + 1.5rem, 3.75rem);

	--wt-leading-tight: 1.1;
	--wt-leading-snug: 1.3;
	--wt-leading-normal: 1.6;

	--wt-tracking-wide: 0.06em;
	--wt-tracking-wider: 0.12em;

	--wt-weight-regular: 400;
	--wt-weight-medium: 500;
	--wt-weight-bold: 700;

	/* --------------------------------------------------------------- spacing
	   4px base step. */
	--wt-space-1: 0.25rem;
	--wt-space-2: 0.5rem;
	--wt-space-3: 0.75rem;
	--wt-space-4: 1rem;
	--wt-space-5: 1.5rem;
	--wt-space-6: 2rem;
	--wt-space-7: 2.5rem;
	--wt-space-8: 3rem;
	--wt-space-9: 4rem;
	--wt-space-10: 5rem;
	--wt-space-11: 6.5rem;

	--wt-section-y: clamp(3rem, 6vw, 6rem);

	/* ---------------------------------------------------------------- layout */
	--wt-container: 1240px;
	--wt-container-narrow: 780px;
	--wt-gutter: clamp(1rem, 4vw, 2.5rem);

	/* Height of the fixed mobile action bar, used to pad the page bottom so the
	   bar can never cover content. This directly fixes the floating-button
	   overlap on the old site. */
	--wt-mobile-bar-h: 4.25rem;
	--wt-adminbar-h: 0px;

	/* -------------------------------------------------------- radius & depth */
	--wt-radius-sm: 6px;
	--wt-radius: 10px;
	--wt-radius-lg: 16px;
	--wt-radius-xl: 24px;
	--wt-radius-2xl: 34px;
	--wt-radius-pill: 999px;

	--wt-shadow-sm: 0 1px 2px rgba(20, 32, 43, 0.06), 0 1px 3px rgba(20, 32, 43, 0.08);
	--wt-shadow: 0 2px 6px rgba(20, 32, 43, 0.07), 0 8px 24px rgba(20, 32, 43, 0.08);
	--wt-shadow-lg: 0 8px 20px rgba(20, 32, 43, 0.1), 0 24px 48px rgba(20, 32, 43, 0.12);
	--wt-shadow-float: 0 18px 42px rgba(5, 42, 74, 0.16), 0 6px 18px rgba(20, 32, 43, 0.1);
	--wt-shadow-orange: 0 14px 30px rgba(240, 90, 24, 0.24);
	--wt-glow-blue: 0 0 0 1px rgba(36, 167, 242, 0.18), 0 20px 48px rgba(7, 59, 103, 0.18);
	--wt-scrim-drawer: rgba(20, 32, 43, 0.55);
	--wt-scrim-hero-strong: rgba(20, 32, 43, 0.92);
	--wt-scrim-hero-medium: rgba(20, 32, 43, 0.78);
	--wt-scrim-hero-light: rgba(20, 32, 43, 0.42);
	--wt-scrim-hero-soft: rgba(20, 32, 43, 0.3);
	--wt-scrim-card-top: rgba(20, 32, 43, 0.25);
	--wt-scrim-card-bottom: rgba(20, 32, 43, 0.88);
	--wt-line-light: rgba(255, 255, 255, 0.12);
	--wt-line-light-strong: rgba(255, 255, 255, 0.25);
	--wt-line-light-soft: rgba(255, 255, 255, 0.15);
	--wt-line-light-70: rgba(255, 255, 255, 0.7);
	--wt-fill-light: rgba(255, 255, 255, 0.12);
	--wt-fill-navy: rgba(7, 59, 103, 0.12);
	--wt-fill-orange: rgba(240, 90, 24, 0.15);
	--wt-fill-blue: rgba(36, 167, 242, 0.14);
	--wt-glow-orange: rgba(255, 122, 26, 0.36);
	--wt-glow-electric: rgba(36, 167, 242, 0.28);
	--wt-grid-line: rgba(255, 255, 255, 0.045);
	--wt-shadow-decoder: rgba(5, 42, 74, 0.55);

	/* ---------------------------------------------------------------- motion
	   Subtle only: hover lift, slow zoom, short reveal. All of it is disabled
	   under prefers-reduced-motion in base.css. */
	--wt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--wt-duration-fast: 120ms;
	--wt-duration: 220ms;
	--wt-duration-slow: 420ms;
	--wt-duration-reveal: 680ms;
	--wt-pointer-x: 85%;
	--wt-pointer-y: 10%;
	--wt-reveal-delay: 0ms;

	/* ------------------------------------------------------- V6 page system
	   Every non-home template shares one chrome vocabulary so the site reads as
	   a single designed product rather than a homepage plus documents. */
	--wt-page-hero-min: clamp(13rem, 26vw, 20rem);
	--wt-editorial-measure: 68ch;
	--wt-aside-width: 20rem;
	--wt-rule: 1px solid var(--wt-border);

	/* Tread motif. A repeating conic/linear pattern used as a divider, a hero
	   texture and a card accent. Pure CSS, so it costs no bytes and scales
	   perfectly on any display. */
	--wt-tread-dark: repeating-linear-gradient(
		115deg,
		rgba(255, 255, 255, 0.055) 0 0.42rem,
		transparent 0.42rem 1.05rem
	);
	--wt-tread-light: repeating-linear-gradient(
		115deg,
		rgba(7, 59, 103, 0.055) 0 0.42rem,
		transparent 0.42rem 1.05rem
	);
	--wt-tread-accent: repeating-linear-gradient(
		115deg,
		rgba(240, 90, 24, 0.16) 0 0.3rem,
		transparent 0.3rem 0.85rem
	);

	/* Editorial rhythm for owner-authored the_content() output. */
	--wt-prose-gap: 1.35em;
	--wt-prose-lead: clamp(1.125rem, 0.5vw + 1rem, 1.3rem);

	/* ------------------------------------------------------------------ misc */
	--wt-focus: 3px solid var(--wt-navy-charcoal);
	--wt-focus-offset: 2px;
	--wt-z-header: 100;
	--wt-z-drawer: 200;
	--wt-z-mobile-bar: 150;
	--wt-z-totop: 140;
}

body.admin-bar {
	--wt-adminbar-h: 32px;
}

@media (max-width: 782px) {
	body.admin-bar {
		--wt-adminbar-h: 46px;
	}
}

@media (max-width: 600px) {
	body.admin-bar {
		--wt-adminbar-h: 0px;
	}
}

/* Breakpoints, documented for reference. CSS custom properties cannot be used
   inside media queries, so these values are repeated literally in the
   stylesheets. Keep them in sync with this list.

   sm   >= 480px   large phone
   md   >= 768px   tablet portrait
   lg   >= 1024px  tablet landscape / small laptop
   xl   >= 1280px  desktop
*/