/**
 * Valdepablo ValdePuntos — Design Tokens (fuente canónica)
 *
 * Extraídos de account.css, theme.css y puntos.css.
 * Mi cuenta importa vía class-account.php (sin @import en producción).
 */

:root {
	/* —— Color: marca (account) —— */
	--vdp-ink: #171714;
	--vdp-cream: #f6f2e9;
	--vdp-paper: #fffdf9;
	--vdp-wine: #7d302e;
	--vdp-wine-2: #a95743;
	--vdp-sand: #d9c4a6;
	--vdp-olive: #6c775c;
	--vdp-sage: #cbd1be;
	--vdp-gold: #d7a849;
	--vdp-line: #ded7cb;
	--vdp-muted: #706d66;
	--vdp-soft: #ece6db;
	--vdp-nav-toggle-active-bg: rgba(23, 23, 20, 0.07);

	/* —— CTA web (Elementor Qi — header post-669) —— */
	--vdp-cta-bg: #899d74;
	--vdp-cta-text: #ffffff;
	--vdp-cta-hover-bg: #f2f1ec;
	--vdp-cta-hover-text: #030303;

	/* —— Botones: tokens semánticos —— */
	--vdp-btn-border-width: 1px;

	/* Primary — superficie clara (verde filled, hover beige) */
	--vdp-btn-primary-bg: #899d74;
	--vdp-btn-primary-fg: #ffffff;
	--vdp-btn-primary-hover-bg: #f2f1ec;
	--vdp-btn-primary-hover-fg: #030303;

	/* Secondary — superficie clara (stroke negro, hover granate) */
	--vdp-btn-secondary-bg: transparent;
	--vdp-btn-secondary-border: #030303;
	--vdp-btn-secondary-fg: #030303;
	--vdp-btn-secondary-hover-bg: #7d302e;
	--vdp-btn-secondary-hover-fg: #ffffff;
	--vdp-btn-secondary-hover-border: #7d302e;

	/* Primary — superficie oscura (blanco filled) */
	--vdp-btn-on-dark-primary-bg: #ffffff;
	--vdp-btn-on-dark-primary-fg: #030303;
	--vdp-btn-on-dark-primary-hover-bg: #f2f1ec;
	--vdp-btn-on-dark-primary-hover-fg: #030303;

	/* Secondary — superficie oscura (filled negro, hover granate) */
	--vdp-btn-on-dark-secondary-bg: transparent;
	--vdp-btn-on-dark-secondary-border: #ffffff;
	--vdp-btn-on-dark-secondary-fg: #ffffff;
	--vdp-btn-on-dark-secondary-hover-bg: #7d302e;
	--vdp-btn-on-dark-secondary-hover-fg: #ffffff;
	--vdp-btn-on-dark-secondary-hover-border: #7d302e;

	/* Link textual */
	--vdp-link-fg: #899d74;
	--vdp-link-hover-fg: #030303;
	--vdp-link-section-fg: #7d302e;
	--vdp-link-section-hover-fg: #a95743;

	/* —— Color: admin / legacy (puntos.css) —— */
	--vdp-admin-wine: #8b2942;
	--vdp-admin-ink: #1d2327;
	--vdp-admin-muted: #646970;
	--vdp-admin-border: #ddd;
	--vdp-admin-surface: #fafafa;
	--vdp-admin-surface-alt: #f0f0f1;

	/* —— Color: semánticos —— */
	--vdp-color-success: #2e7d32;
	--vdp-color-success-bg: #e8f5e9;
	--vdp-color-warning: #8c6924;
	--vdp-color-warning-bg: #f4e8ce;
	--vdp-color-error: #8c3b3b;
	--vdp-color-error-bg: #f4dede;
	--vdp-color-positive: #2e7d32;
	--vdp-color-negative: #c62828;

	/* —— Color: superficies especiales —— */
	--vdp-empty-bg: #fbf8f2;
	--vdp-empty-border: #bcb5aa;
	--vdp-alert-bg: #fff8ef;
	--vdp-alert-border: #e7c4aa;
	--vdp-alert-text: #62554b;
	--vdp-table-head-bg: #fbf9f5;
	--vdp-hero-eyebrow: #ffe7bf;
	--vdp-on-dark-muted: rgba(255, 255, 255, 0.86);

	/* —— Tipografía (alineada a Elementor kit-6: Montserrat body + titulares) —— */
	--vdp-font-sans: Arial, Helvetica, sans-serif;
	--vdp-font-ui: "Montserrat", var(--vdp-font-sans);
	--vdp-font-display: var(--vdp-font-ui);
	--vdp-font-serif: var(--vdp-font-display);
	--vdp-font-body: var(--vdp-font-ui);

	/* Escala (referencia web: body 16px, h2 24px, h3 18px, eyebrow 12px) */
	--vdp-text-page-title: clamp(32px, 4vw, 45px);
	--vdp-text-account-title: 28px;
	--vdp-text-h3: 18px;
	--vdp-text-section-title: 24px;
	--vdp-text-card-title: var(--vdp-text-h3);
	--vdp-text-order-card-title: var(--vdp-text-h3);
	--vdp-weight-order-card-title: var(--vdp-weight-semibold);
	--vdp-text-card-title-sm: var(--vdp-text-h3);
	--vdp-text-hero-title: clamp(36px, 4vw, 45px);
	--vdp-text-mission-title: var(--vdp-text-h3);
	--vdp-text-stat-value: 36px;
	--vdp-text-stat-label: 12px;
	--vdp-text-stat-hint: 16px;
	--vdp-stat-padding-top: var(--vdp-space-5);
	--vdp-stat-padding-inline: var(--vdp-space-5);
	--vdp-stat-padding-bottom: var(--vdp-space-5);
	--vdp-stat-block-gap: 24px;
	--vdp-stat-value-gap: 12px;
	--vdp-text-body: 16px;
	--vdp-text-body-sm: 14px;
	--vdp-text-caption: 13px;
	--vdp-text-label: 14px;
	--vdp-text-eyebrow: 12px;

	--vdp-weight-regular: 400;
	--vdp-weight-medium: 500;
	--vdp-weight-semibold: 600;
	--vdp-weight-bold: 700;

	--vdp-lh-body: 1.5;
	--vdp-lh-tight: 1.1;
	--vdp-lh-heading: 1;
	--vdp-lh-section: 1.11;
	--vdp-lh-h3: 22px;
	--vdp-lh-order-card-title: var(--vdp-lh-h3);
	--vdp-lh-section-title: 28px;

	--vdp-tracking-section-title: -1px;
	--vdp-tracking-account-title: -1px;
	--vdp-tracking-h3: -1px;
	--vdp-tracking-stat-value: -1px;
	--vdp-tracking-eyebrow: 0.13em;
	--vdp-tracking-label: 0.1em;
	--vdp-tracking-table-head: 0.12em;

	/* —— Espaciado —— */
	--vdp-space-2: 8px;
	--vdp-space-3: 12px;
	--vdp-space-4: 16px;
	--vdp-space-5: 20px;
	--vdp-space-6: 22px;
	--vdp-space-7: 26px;
	--vdp-space-8: 28px;
	--vdp-space-9: 34px;
	--vdp-space-page-y: 28px;
	--vdp-space-page-bottom: 64px;
	--vdp-space-section: 40px;
	--vdp-space-block: 40px;
	--vdp-gap-grid: 16px;
	--vdp-gap-grid-sm: 12px;
	--vdp-sidebar-width: 250px;

	/* —— Radios —— */
	--vdp-radius-xs: 4px;
	--vdp-radius-sm: 6px;
	--vdp-radius-md: 14px;
	--vdp-radius: 18px;
	--vdp-radius-lg: 22px;
	--vdp-radius-pill: 999px;
	--vdp-radius-nav: 9px;
	--vdp-radius-link-card: 12px;

	/* —— Tabs (line) —— */
	--vdp-tabs-gap: 16px;
	--vdp-tabs-list-gap: 4px;
	--vdp-tabs-trigger-height: 36px;
	--vdp-tabs-trigger-padding: 8px 16px;
	--vdp-tabs-trigger-radius: 999px;
	--vdp-tabs-pill-gap: 4px;
	--vdp-tabs-pill-padding: 4px;
	--vdp-tabs-pill-bg: rgba(23, 23, 20, 0.06);
	--vdp-tabs-pill-active-bg: #ffffff;
	--vdp-tabs-pill-active-shadow: 0 1px 2px rgba(23, 23, 20, 0.08);
	--vdp-tabs-line-gap: 24px;
	--vdp-tabs-line-trigger-padding: 0 4px 12px;

	--vdp-input-height: 44px;
	--vdp-input-padding: 10px 12px;
	--vdp-input-radius: 8px;
	--vdp-input-border: var(--vdp-line);
	--vdp-input-bg: var(--vdp-paper);
	--vdp-sidebar-sticky-offset: 6px;
	--vdp-sidebar-sticky-top: calc(105px + var(--vdp-sidebar-sticky-offset));
	--vdp-form-gap: 12px;
	--vdp-field-gap: 16px;

	/* Cards de contenido — sin stroke (shell sidebar/panel sí llevan borde) */
	--vdp-card-border: none;
	--vdp-checkbox-size: 16px;
	--vdp-radio-size: 16px;

	/* —— Sombras —— */
	--vdp-shadow: 0 18px 52px rgba(40, 30, 20, 0.1);
	--vdp-shadow-admin: 0 1px 1px rgba(0, 0, 0, 0.04);
	--vdp-shadow-admin-hover: 0 2px 8px rgba(139, 41, 66, 0.12);

	/* —— Botones (alineados a .qodef-qi-button header) —— */
	--vdp-btn-min-height: 48px;
	--vdp-btn-padding: 10px 20px;
	--vdp-btn-padding-sm: 8px 16px;
	--vdp-btn-padding-xs: 6px 12px;
	--vdp-btn-font-size: 13px;
	--vdp-btn-font-size-sm: 12px;
	--vdp-btn-font-size-xs: 11px;
	--vdp-btn-font-weight: 500;
	--vdp-btn-border-radius: 100px;
	--vdp-btn-letter-spacing: 0.02em;

	/* —— Header (theme.css) —— */
	--vdp-header-icon-size: 46px;
	--vdp-header-icon-bg: var(--vdp-soft);
	--vdp-header-icon-bg-hover: var(--vdp-line);
	--vdp-header-icon-color: var(--vdp-ink);
	--vdp-header-icon-color-hover: var(--vdp-wine);

	/* —— Breakpoints (referencia; media queries en componentes) —— */
	--vdp-bp-tablet: 1024px;
	--vdp-bp-mobile: 782px;
	--vdp-bp-mobile-sm: 767px;
}