/*
Theme Name:   Vapeline Wholesale
Theme URI:    https://example.com/
Description:  Wholesale-only vape distribution theme. Hand-built classic theme, WooCommerce-ready, no page builder, no framework. Marketing pages render from static data files (zero runtime DB queries); only cart/checkout/account touch the database.
Author:       Internal
Version:      0.1.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License:      Proprietary
Text Domain:  vapeline
Tags:         wholesale, b2b, woocommerce, e-commerce, custom-colors
*/

/* ==========================================================================
   LAYER 1 — DESIGN TOKENS + BASE
   This file is the only stylesheet WordPress requires by name. It carries the
   design tokens so every later layer can consume them, plus the reset and the
   few global utilities. Everything else lives in assets/css/.
   Load order (see inc/enqueue.php):
     style.css -> layout.css -> components.css -> sections.css -> pages.css -> woocommerce.css
   ========================================================================== */

:root {
	/* surfaces */
	--vp-ink:        #0C1116;
	--vp-ink-2:      #151C24;
	--vp-ink-3:      #1F2933;
	--vp-bg:         #FFFFFF;
	--vp-bg-2:       #F7F8FA;
	--vp-line:       #E4E7EB;
	--vp-line-2:     #F0F2F5;

	/* type */
	--vp-text:       #101828;
	--vp-muted:      #6B7280;
	--vp-muted-2:    #98A2B3;

	/* brand */
	--vp-accent:     #00D68F;
	--vp-accent-dk:  #00B378;
	--vp-accent-ink: #052E20;

	/* states */
	--vp-warn:       #F59E0B;
	--vp-warn-bg:    #FFFBEB;
	--vp-warn-line:  #FDE68A;
	--vp-warn-ink:   #92400E;
	--vp-ok:         #12805C;
	--vp-danger:     #E5484D;

	/* geometry */
	--vp-r:          12px;
	--vp-r-lg:       16px;
	--vp-max:        1200px;
	--vp-gutter:     24px;

	/* elevation */
	--vp-sh-1: 0 6px 18px rgba(16,24,40,.06);
	--vp-sh-2: 0 12px 28px rgba(16,24,40,.10);

	/* type scale */
	--vp-f-xs:   11px;
	--vp-f-sm:   12px;
	--vp-f-base: 13.5px;
	--vp-f-md:   15px;
	--vp-f-lg:   18px;
}

/* ---- reset -------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: var(--vp-f-md);
	line-height: 1.55;
	color: var(--vp-text);
	background: var(--vp-bg);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video {
	display: block;
	max-width: 100%;
	height: auto;
}

a { color: inherit; text-decoration: none; }

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
	border: 0;
	background: none;
}

input, select, textarea { font: inherit; color: inherit; }

table { border-collapse: collapse; width: 100%; }

/* ---- accessibility ----------------------------------------------------- */
:focus-visible {
	outline: 2px solid var(--vp-accent-dk);
	outline-offset: 2px;
}

.vp-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.vp-skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 10000;
	padding: 12px 18px;
	background: var(--vp-ink);
	color: #fff;
	border-radius: 0 0 var(--vp-r) var(--vp-r);
	font-size: var(--vp-f-base);
	font-weight: 600;
}

.vp-skip-link:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* ---- utilities --------------------------------------------------------- */
.vp-wrap {
	max-width: var(--vp-max);
	margin: 0 auto;
	padding: 0 var(--vp-gutter);
}

.vp-num { font-variant-numeric: tabular-nums; }

.vp-hidden { display: none !important; }

/*
 * Visually hidden, still read. Different from .vp-hidden: this keeps the node in
 * the accessibility tree and in the document outline, which is what a heading
 * that exists only for structure and for crawlers needs. The clip-path is the
 * modern form of the old 1px trick and cannot be undone by a stray transform.
 */
.vp-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Keep long SKU codes and emails from breaking the grid. */
.vp-break { overflow-wrap: anywhere; }