/* =========================================================================
 * ComprasGuate — design token layer
 * -------------------------------------------------------------------------
 * Values derived from Wolmart demo-15's measured design system (type ramp,
 * spacing rhythm, radius scale, flat/low-shadow component language), with
 * ComprasGuate's own brand blue kept as the primary hue.
 *
 * This file DEFINES tokens only. It contains no component rules, so it can
 * never override an existing template. Templates that already declare their
 * own :root block keep winning — this layer only supplies a value where the
 * template supplies none.
 *
 * Load order: must be enqueued BEFORE any template's inline <style>.
 * ========================================================================= */

:root {

	/* --- Brand ---------------------------------------------------------
	 * #1E73BE is ComprasGuate's blue — the single most-used colour in the
	 * plugin (323 literal occurrences). Demo-15's own primary is the coral
	 * #EC7A5C; to adopt it, change this one line and nothing else.
	 */
	--cg-color-primary:        #1E73BE;
	--cg-color-primary-dark:   #155490;
	--cg-color-primary-light:  #4B93D8;
	--cg-color-primary-bg:     #EFF6FF;

	/* --- Ink ramp -------------------------------------------------------
	 * Replaces six competing "muted text" values (#64748B, #6B7280, #9CA3AF,
	 * #94A3B8, #5C6573, #6B7280) with one three-step ramp.
	 */
	--cg-color-text:           #0F172A;
	--cg-color-text-muted:     #64748B;
	--cg-color-text-faint:     #94A3B8;
	--cg-color-text-inverse:   #FFFFFF;

	/* --- Surfaces & lines ----------------------------------------------
	 * Replaces ten competing border values (#E8EBF0, #E6E9EE, #E5E7EB,
	 * #E9EDF2, #DFE5EC, #EEF2F6, #ECEEF1, #E2E5EA, #F3F4F6, #F1F3F7).
	 */
	--cg-color-surface:        #FFFFFF;
	--cg-color-bg:             #F7F8FA;
	--cg-color-bg-soft:        #F8FAFC;
	--cg-color-border:         #E2E8F0;
	--cg-color-border-soft:    #F1F5F9;

	/* --- Semantic states ------------------------------------------------ */
	--cg-color-success:        #0E9F6E;
	--cg-color-success-dark:   #047857;
	--cg-color-success-bg:     #ECFDF5;
	--cg-color-danger:         #DC2626;
	--cg-color-danger-dark:    #991B1B;
	--cg-color-danger-bg:      #FEE2E2;
	--cg-color-warning:        #F59E0B;
	--cg-color-warning-dark:   #92400E;
	--cg-color-warning-bg:     #FEF3C7;
	--cg-color-accent-rose:    #E11D48;
	--cg-color-accent-rose-bg: #FFF1F2;

	/* --- Type -----------------------------------------------------------
	 * Ramp measured off demo-15: 12 / 13 / 14 / 16 / 18 / 24 / 34.
	 * The font stack degrades to system-ui if Poppins is not loaded, so this
	 * layer never forces a webfont request on its own.
	 */
	--cg-font-body:    'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--cg-font-heading: var(--cg-font-body);

	--cg-text-xs:  12px;
	--cg-text-sm:  13px;
	--cg-text-md:  14px;
	--cg-text-lg:  16px;
	--cg-text-xl:  18px;
	--cg-text-2xl: 24px;
	--cg-text-3xl: 34px;

	--cg-weight-normal:   400;
	--cg-weight-medium:   500;
	--cg-weight-semibold: 600;
	--cg-weight-bold:     700;
	--cg-weight-extra:    800;

	--cg-leading-tight: 1.2;
	--cg-leading-body:  1.6;
	--cg-tracking-tight: -0.025em;

	/* --- Spacing ---------------------------------------------------------
	 * Demo-15 runs on a 10px root with a 0.5 / 1 / 1.5 / 2.5 / 4 / 6 rem
	 * rhythm. Expressed here in px so it is independent of root font size.
	 */
	--cg-space-xs:  5px;
	--cg-space-sm:  10px;
	--cg-space-md:  15px;
	--cg-space-lg:  25px;
	--cg-space-xl:  40px;
	--cg-space-2xl: 60px;

	/* --- Shape -----------------------------------------------------------
	 * Demo-15 is deliberately tight: 3px is its dominant radius (67 rules),
	 * then 2/4/5/6/10px, with 50% reserved for circles. It uses almost no
	 * shadow — product cards there carry none at all.
	 */
	--cg-radius-sm:   3px;
	--cg-radius-md:   4px;
	--cg-radius-lg:   6px;
	--cg-radius-xl:   10px;
	--cg-radius-full: 999px;

	--cg-shadow-none: none;
	--cg-shadow-sm:   0 1px 2px rgba(15, 23, 42, .06);
	--cg-shadow-md:   0 2px 8px rgba(15, 23, 42, .08);
	--cg-shadow-lg:   0 8px 24px rgba(15, 23, 42, .10);

	--cg-border-width: 1px;

	/* --- Layout ---------------------------------------------------------- */
	--cg-container:      1280px;
	--cg-container-wide: 1820px;
}

/* =========================================================================
 * Legacy aliases
 * -------------------------------------------------------------------------
 * The plugin currently speaks four token vocabularies: --cg-* (917 uses),
 * bare names such as --ink / --line / --blue (1344 uses), --c-* (343 uses)
 * and --csa-* (105 uses). Mapping them here lets all four resolve to one
 * system without editing a single template.
 *
 * These are intentionally lower-priority than any template's own :root
 * block, which appears later in the document and therefore still wins.
 * Nothing changes visually until a template's local block is removed.
 * ========================================================================= */

:root {
	/* bare names */
	--ink:        var(--cg-color-text);
	--mut:        var(--cg-color-text-muted);
	--muted:      var(--cg-color-text-muted);
	--soft:       var(--cg-color-text-faint);
	--line:       var(--cg-color-border);
	--line2:      var(--cg-color-border-soft);
	--bd:         var(--cg-color-border);
	--bd2:        var(--cg-color-border);
	--bdsoft:     var(--cg-color-border-soft);
	--bg:         var(--cg-color-bg);
	--blue:       var(--cg-color-primary);
	--blue-d:     var(--cg-color-primary-dark);
	--blue-dk:    var(--cg-color-primary-dark);
	--blue-bg:    var(--cg-color-primary-bg);
	--p:          var(--cg-color-primary);
	--pd:         var(--cg-color-primary-dark);
	--pbg:        var(--cg-color-primary-bg);
	--brand:      var(--cg-color-primary);
	--green:      var(--cg-color-success);
	--green-d:    var(--cg-color-success-dark);
	--green-bg:   var(--cg-color-success-bg);
	--amber:      var(--cg-color-warning);

	/* --cg-* short forms used by the plaza templates */
	--cg-brand:      var(--cg-color-primary);
	--cg-brand-deep: var(--cg-color-primary-dark);
	--cg-brand-soft: var(--cg-color-primary-bg);
	--cg-ink:        var(--cg-color-text);
	--cg-muted:      var(--cg-color-text-muted);
	--cg-line:       var(--cg-color-border);
	--cg-bg:         var(--cg-color-bg);

	/* --c-* vocabulary */
	--c-text:         var(--cg-color-text);
	--c-muted:        var(--cg-color-text-muted);
	--c-soft:         var(--cg-color-text-faint);
	--c-border:       var(--cg-color-border);
	--c-border-soft:  var(--cg-color-border-soft);
	--c-card:         var(--cg-color-surface);
	--c-page-bg:      var(--cg-color-bg);
	--c-blue:         var(--cg-color-primary);
	--c-blue-dark:    var(--cg-color-primary-dark);
	--c-blue-darker:  #0F4C81;
	--c-blue-bg:      var(--cg-color-primary-bg);
	--c-trust:        var(--cg-color-success);
	--c-trust-dark:   var(--cg-color-success-dark);
	--c-trust-bg:     var(--cg-color-success-bg);
	--c-sale:         var(--cg-color-danger);
	--c-promo:        #FBBF24;
	--c-promo-text:   var(--cg-color-warning-dark);
	--c-hot:          #F97316;
	--c-violet:       #7C3AED;

	/* --csa-* vocabulary (subastas) */
	--csa-text:       var(--cg-color-text);
	--csa-text-2:     #2C3340;
	--csa-text-3:     var(--cg-color-text-muted);
	--csa-border:     var(--cg-color-border-soft);
	--csa-border-2:   var(--cg-color-border);
	--csa-page:       var(--cg-color-bg);
	--csa-blue:       var(--cg-color-primary);
	--csa-blue-dark:  var(--cg-color-primary-dark);
	--csa-blue-darker:#0B3A6B;
	--csa-blue-50:    var(--cg-color-primary-bg);
	--csa-trust:      var(--cg-color-success);
	--csa-trust-50:   var(--cg-color-success-bg);
	--csa-rose:       var(--cg-color-accent-rose);
	--csa-rose-50:    var(--cg-color-accent-rose-bg);
	--csa-purple:     #7C3AED;
	--csa-purple-50:  #F5F3FF;
	--csa-promo:      #FCD34D;
	--csa-promo-text: var(--cg-color-warning-dark);
}

/* =========================================================================
 * Card primitive
 * -------------------------------------------------------------------------
 * Eight front-end files already emit class="cg-card" / "cg-card-elevated".
 * Those classes are defined nowhere in the plugin, so they currently render
 * as bare divs. Defined here to demo-15's flat language.
 * ========================================================================= */

.cg-card {
	background: var(--cg-color-surface);
	border: var(--cg-border-width) solid var(--cg-color-border);
	border-radius: var(--cg-radius-lg);
	padding: var(--cg-space-lg);
}

.cg-card-elevated {
	border-color: var(--cg-color-border-soft);
	box-shadow: var(--cg-shadow-md);
}


/* =========================================================================
 * ComprasGuate — component primitives
 * -------------------------------------------------------------------------
 * The plugin's templates already emit these class names. They are referenced
 * 190+ times across the front end and are defined nowhere, so today they
 * render as unstyled divs and spans.
 *
 * Every rule below is written entirely in terms of cgmp-tokens.css. There is
 * not one hardcoded colour, size or radius in this file — restyling the
 * whole system means editing tokens, never this file.
 *
 * Shapes follow Wolmart demo-15: tight radii, 1px hairline borders,
 * uppercase 600-weight buttons, minimal shadow.
 *
 * Requires: cgmp-tokens.css, loaded first.
 * ========================================================================= */

/* --- Layout ------------------------------------------------------------ */

.cg-container {
	width: 100%;
	max-width: var(--cg-container);
	margin-inline: auto;
	padding-inline: var(--cg-space-md);
}

/* --- Cards -------------------------------------------------------------
 * Demo-15's product card carries no border, no radius and no shadow at all.
 * ComprasGuate's dashboards are denser than a fashion catalogue, so the base
 * card keeps a hairline; -elevated and -interactive add the depth.
 */

.cg-card {
	background: var(--cg-color-surface);
	border: var(--cg-border-width) solid var(--cg-color-border);
	border-radius: var(--cg-radius-lg);
	padding: var(--cg-space-lg);
}

.cg-card-elevated {
	border-color: var(--cg-color-border-soft);
	box-shadow: var(--cg-shadow-md);
}

.cg-card-interactive {
	transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.cg-card-interactive:hover {
	border-color: var(--cg-color-primary-light);
	box-shadow: var(--cg-shadow-lg);
	transform: translateY(-2px);
}

/* --- Buttons ------------------------------------------------------------
 * Demo-15: 13-14px, weight 600, uppercase, 3px radius, 2px border, no shadow.
 */

.cg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cg-space-xs);
	padding: 11px 22px;
	border: 2px solid var(--cg-color-border);
	border-radius: var(--cg-radius-sm);
	background: var(--cg-color-surface);
	color: var(--cg-color-text);
	font-family: var(--cg-font-body);
	font-size: var(--cg-text-sm);
	font-weight: var(--cg-weight-semibold);
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.cg-btn:hover { border-color: var(--cg-color-text-faint); }

.cg-btn:focus-visible {
	outline: 2px solid var(--cg-color-primary);
	outline-offset: 2px;
}

.cg-btn[disabled],
.cg-btn.is-disabled {
	opacity: .55;
	cursor: not-allowed;
}

.cg-btn-sm {
	padding: 7px 14px;
	font-size: var(--cg-text-xs);
}

.cg-btn-primary {
	background: var(--cg-color-primary);
	border-color: var(--cg-color-primary);
	color: var(--cg-color-text-inverse);
}
.cg-btn-primary:hover {
	background: var(--cg-color-primary-dark);
	border-color: var(--cg-color-primary-dark);
}

.cg-btn-success {
	background: var(--cg-color-success);
	border-color: var(--cg-color-success);
	color: var(--cg-color-text-inverse);
}
.cg-btn-success:hover {
	background: var(--cg-color-success-dark);
	border-color: var(--cg-color-success-dark);
}

.cg-btn-danger {
	background: var(--cg-color-danger);
	border-color: var(--cg-color-danger);
	color: var(--cg-color-text-inverse);
}
.cg-btn-danger:hover {
	background: var(--cg-color-danger-dark);
	border-color: var(--cg-color-danger-dark);
}

.cg-btn-ghost {
	background: transparent;
	border-color: transparent;
	color: var(--cg-color-primary);
}
.cg-btn-ghost:hover {
	background: var(--cg-color-primary-bg);
	border-color: transparent;
}

/* --- Badges ------------------------------------------------------------ */

.cg-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: var(--cg-radius-full);
	background: var(--cg-color-bg-soft);
	color: var(--cg-color-text-muted);
	font-size: var(--cg-text-xs);
	font-weight: var(--cg-weight-semibold);
	line-height: 1.4;
	white-space: nowrap;
}

.cg-badge-success {
	background: var(--cg-color-success-bg);
	color: var(--cg-color-success-dark);
}
.cg-badge-warning {
	background: var(--cg-color-warning-bg);
	color: var(--cg-color-warning-dark);
}
.cg-badge-danger {
	background: var(--cg-color-danger-bg);
	color: var(--cg-color-danger-dark);
}
.cg-badge-primary {
	background: var(--cg-color-primary-bg);
	color: var(--cg-color-primary-dark);
}
.cg-badge-neutral {
	background: var(--cg-color-bg-soft);
	color: var(--cg-color-text-muted);
	border: var(--cg-border-width) solid var(--cg-color-border);
}

/* --- Product card -------------------------------------------------------
 * Demo-15's catalogue card is flat: no border, no radius, no shadow, and the
 * image sits on a neutral tile. Title 13px/500, price 16px/600.
 */

.cg-product-card {
	display: flex;
	flex-direction: column;
	background: var(--cg-color-surface);
	border: var(--cg-border-width) solid var(--cg-color-border);
	border-radius: var(--cg-radius-lg);
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.cg-product-card:hover {
	border-color: var(--cg-color-primary-light);
	box-shadow: var(--cg-shadow-md);
}

.cg-product-img {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	background-color: var(--cg-color-bg-soft);
	background-size: cover;
	background-position: center;
	font-size: 40px;
}

.cg-product-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--cg-space-xs);
	padding: var(--cg-space-md);
}

.cg-product-name {
	color: var(--cg-color-text);
	font-size: var(--cg-text-sm);
	font-weight: var(--cg-weight-medium);
	line-height: 1.4;
	text-decoration: none;
}
.cg-product-name:hover { color: var(--cg-color-primary); }

.cg-product-price {
	color: var(--cg-color-text);
	font-size: var(--cg-text-lg);
	font-weight: var(--cg-weight-semibold);
	margin-bottom: var(--cg-space-xs);
}
.cg-product-price small {
	color: var(--cg-color-text-faint);
	font-size: var(--cg-text-sm);
	font-weight: var(--cg-weight-normal);
	text-decoration: line-through;
	margin-left: 6px;
}

.cg-product-stock {
	font-size: var(--cg-text-xs);
	color: var(--cg-color-text-muted);
}

.cg-btn-block { width: 100%; }

/* --- Alerts ------------------------------------------------------------ */

.cg-alert {
	display: flex;
	gap: var(--cg-space-sm);
	padding: var(--cg-space-md) var(--cg-space-md);
	border: var(--cg-border-width) solid var(--cg-color-border);
	border-left-width: 3px;
	border-radius: var(--cg-radius-md);
	background: var(--cg-color-bg-soft);
	color: var(--cg-color-text);
	font-size: var(--cg-text-md);
	line-height: var(--cg-leading-body);
}

.cg-alert-success {
	background: var(--cg-color-success-bg);
	border-color: var(--cg-color-success);
	color: var(--cg-color-success-dark);
}
.cg-alert-warning {
	background: var(--cg-color-warning-bg);
	border-color: var(--cg-color-warning);
	color: var(--cg-color-warning-dark);
}
.cg-alert-danger {
	background: var(--cg-color-danger-bg);
	border-color: var(--cg-color-danger);
	color: var(--cg-color-danger-dark);
}

/* --- Form controls ----------------------------------------------------- */

.cg-form-input,
.cg-form-select,
.cg-form-textarea {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: var(--cg-border-width) solid var(--cg-color-border);
	border-radius: var(--cg-radius-sm);
	background: var(--cg-color-surface);
	color: var(--cg-color-text);
	font-family: var(--cg-font-body);
	font-size: var(--cg-text-md);
	line-height: 1.5;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.cg-form-input:focus,
.cg-form-select:focus,
.cg-form-textarea:focus {
	outline: none;
	border-color: var(--cg-color-primary);
	box-shadow: 0 0 0 3px var(--cg-color-primary-bg);
}

.cg-form-input::placeholder,
.cg-form-textarea::placeholder { color: var(--cg-color-text-faint); }

.cg-form-textarea { min-height: 110px; resize: vertical; }

/* --- Empty states ------------------------------------------------------ */

.cg-empty {
	text-align: center;
	padding: var(--cg-space-xl) var(--cg-space-md);
	background: var(--cg-color-surface);
	border: var(--cg-border-width) solid var(--cg-color-border);
	border-radius: var(--cg-radius-lg);
}

.cg-empty-icon {
	font-size: 44px;
	line-height: 1;
	margin-bottom: var(--cg-space-md);
}

.cg-empty-title {
	font-size: var(--cg-text-xl);
	font-weight: var(--cg-weight-bold);
	color: var(--cg-color-text);
	letter-spacing: var(--cg-tracking-tight);
	margin-bottom: var(--cg-space-xs);
}

.cg-empty-desc {
	font-size: var(--cg-text-md);
	color: var(--cg-color-text-muted);
	line-height: var(--cg-leading-body);
	max-width: 46ch;
	margin-inline: auto;
}