/**
 * CYBEL Design System — Custom Properties
 * Single source of truth para tipografia, colores y espaciado.
 * Los valores son overrideados por el Customizer dinamicamente.
 *
 * @package MainTheme\Assets\CSS
 * @version 1.0.0
 */

:root {
	--ds-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--ds-font-size-xs: 0.75rem;
	--ds-font-size-sm: 0.8125rem;
	--ds-font-size-base: 0.875rem;
	--ds-font-size-md: 1rem;
	--ds-font-size-lg: 1.125rem;
	--ds-font-size-xl: 1.375rem;
	--ds-font-size-2xl: 1.625rem;

	--ds-font-weight-light: 300;
	--ds-font-weight-regular: 400;
	--ds-font-weight-medium: 500;
	--ds-font-weight-semibold: 600;
	--ds-font-weight-bold: 700;

	--ds-title-weight: 700;
	--ds-title-color: #333333;
	--ds-title-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--ds-title-size-page: var(--ds-font-size-xl);
	--ds-title-size-section: var(--ds-font-size-lg);
	--ds-title-size-subsection: var(--ds-font-size-md);

	--ds-body-size: var(--ds-font-size-base);
	--ds-body-weight: var(--ds-font-weight-regular);
	--ds-body-color: #333333;
	--ds-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--ds-body-line-height: 1.6;

--ds-btn-bg: #111331;
  --ds-btn-text: #ffffff;
  --ds-btn-hover-bg: #c09578;
	--ds-btn-font-size: var(--ds-font-size-sm);
	--ds-btn-font-weight: var(--ds-font-weight-semibold);
	--ds-btn-padding-y: 0.75rem;
	--ds-btn-padding-x: 1.75rem;
	--ds-btn-radius: 8px;
	--ds-btn-transition: all 0.2s ease;

	--ds-input-border: #cccccc;
	--ds-input-border-focus: #111331;
	--ds-input-radius: 4px;
	--ds-input-padding-y: 0.625rem;
	--ds-input-padding-x: 0.75rem;
	--ds-input-font-size: var(--ds-font-size-base);
	--ds-input-bg: #ffffff;

	--ds-spacing-xs: 0.25rem;
	--ds-spacing-sm: 0.5rem;
	--ds-spacing-md: 1rem;
	--ds-spacing-lg: 1.5rem;
	--ds-spacing-xl: 2rem;
	--ds-spacing-2xl: 3rem;

	--ds-color-primary: #111331;
	--ds-color-text: #333333;
	--ds-color-text-muted: #777777;
	--ds-color-border: #e5e5e5;
	--ds-color-bg-light: #f9f9f9;
	--ds-color-success: #28a745;
	--ds-color-warning: #f0ad4e;
	--ds-color-danger: #dc3545;
}

/* ============================================================
   GLOBAL COMPONENT STYLES — Shared across all store pages
   ============================================================ */

.page-title,
.woocommerce-account .entry-title,
.wishlist-page-title,
.cart-page-title {
	font-family: var(--ds-title-font-family);
	font-size: var(--ds-title-size-page);
	font-weight: var(--ds-title-weight);
	color: var(--ds-title-color);
	margin-bottom: var(--ds-spacing-lg);
}

.section-title,
.woocommerce-cart .cart_totals h2,
.woocommerce-order-details h2,
.woocommerce-column__title {
	font-family: var(--ds-title-font-family);
	font-size: var(--ds-title-size-section);
	font-weight: var(--ds-title-weight);
	color: var(--ds-title-color);
}

.store-body-text,
.woocommerce table td,
.woocommerce table th,
.woocommerce-cart .cart-item-details,
.woocommerce-account .woocommerce-MyAccount-content p {
	font-family: var(--ds-body-font-family);
	font-size: var(--ds-body-size);
	font-weight: var(--ds-body-weight);
	line-height: var(--ds-body-line-height);
	color: var(--ds-body-color);
}

.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.wishlist-add-to-cart,
.btn-primary,
.mini-cart__btn--primary,
button[name="apply_coupon"],
button[name="update_cart"] {
	background-color: var(--ds-btn-bg);
	color: var(--ds-btn-text);
	font-family: var(--ds-font-family);
	font-size: var(--ds-btn-font-size);
	font-weight: var(--ds-btn-font-weight);
	padding: var(--ds-btn-padding-y) var(--ds-btn-padding-x);
	border-radius: var(--ds-btn-radius);
	border: none;
	cursor: pointer;
	transition: var(--ds-btn-transition);
	text-decoration: none;
	display: inline-block;
	text-align: center;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wishlist-add-to-cart:hover,
.btn-primary:hover,
.mini-cart__btn--primary:hover,
button[name="apply_coupon"]:hover {
	background-color: var(--ds-btn-hover-bg);
	color: var(--ds-btn-text);
}

.woocommerce button.button.alt,
.btn-secondary,
button[name="update_cart"] {
	background-color: transparent;
	color: var(--ds-btn-bg);
	border: 1px solid var(--ds-btn-bg);
}

.woocommerce button.button.alt:hover,
.btn-secondary:hover,
button[name="update_cart"]:hover {
	background-color: var(--ds-btn-bg);
	color: var(--ds-btn-text);
}

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select,
.woocommerce-form .input-text,
.store-input {
	font-family: var(--ds-font-family);
	font-size: var(--ds-input-font-size);
	padding: var(--ds-input-padding-y) var(--ds-input-padding-x);
	border: 1px solid var(--ds-input-border);
	border-radius: var(--ds-input-radius);
	background-color: var(--ds-input-bg);
	transition: border-color 0.2s ease;
	width: 100%;
}

.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce input[type="number"]:focus,
.woocommerce textarea:focus,
.woocommerce select:focus,
.woocommerce-form .input-text:focus,
.store-input:focus {
	border-color: var(--ds-input-border-focus);
	outline: none;
}

.woocommerce table.shop_table,
.store-table {
	border-collapse: collapse;
	width: 100%;
	font-family: var(--ds-font-family);
}

.woocommerce table.shop_table th,
.store-table th {
	font-size: var(--ds-font-size-sm);
	font-weight: var(--ds-font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ds-color-text-muted);
	padding: var(--ds-spacing-sm) var(--ds-spacing-md);
	border-bottom: 2px solid var(--ds-color-border);
}

.woocommerce table.shop_table td,
.store-table td {
	font-size: var(--ds-body-size);
	padding: var(--ds-spacing-md);
	border-bottom: 1px solid var(--ds-color-border);
	vertical-align: middle;
}

.woocommerce-breadcrumb,
.store-breadcrumb {
	font-family: var(--ds-font-family);
	font-size: var(--ds-font-size-sm);
	color: var(--ds-color-text-muted);
	margin-bottom: var(--ds-spacing-lg);
}

.order-status,
.wc-order-status {
	display: inline-block;
	padding: 0.2em 0.7em;
	border-radius: var(--ds-btn-radius);
	font-size: var(--ds-font-size-xs);
	font-weight: var(--ds-font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}