/*
 * Econo Graphics Display Generator — Design Tokens
 * ------------------------------------------------
 * Ajusta aquí la interfaz sin perseguir estilos sueltos.
 * Estructura:
 * 1. Colores
 * 2. Tipografía
 * 3. Espaciado
 * 4. Bordes, radios y sombras
 * 5. Componentes
 * 6. Overrides responsive: desktop / tablet / móvil
 */

.egeg-theme-root,
.egeg-generator {
	/* 1) COLOR / PALETA BASE */
	--egeg-color-purple: #8732F5;
	--egeg-color-purple-soft: #EFE6FF;
	--egeg-color-purple-line: #B78CFF;
	--egeg-color-orange: #F98800;
	--egeg-color-yellow: #FFC82F;
	--egeg-color-yellow-soft: #FFE988;
	--egeg-color-primary: var(--egeg-color-purple);
	--egeg-color-primary-strong: #6F25D6;
	--egeg-color-primary-soft: var(--egeg-color-purple-soft);
	--egeg-color-primary-line: var(--egeg-color-purple-line);
	--egeg-primary-rgb: 135, 50, 245;
	--egeg-primary-strong-rgb: 111, 37, 214;
	--egeg-color-accent: var(--egeg-color-orange);
	--egeg-color-accent-strong: #D27300;
	--egeg-color-accent-soft: #FFF1DE;
	--egeg-accent-rgb: 249, 136, 0;
	--egeg-color-highlight: var(--egeg-color-yellow);
	--egeg-color-highlight-text: #2E2417;
	--egeg-highlight-rgb: 255, 200, 47;
	--egeg-panel-rgb: 246, 242, 255;
	--egeg-color-gray-900: #252525;
	--egeg-color-gray-700: #464646;
	--egeg-color-gray-500: #717171;
	--egeg-color-gray-300: #A1A1A1;
	--egeg-color-gray-200: #D6D6D6;
	--egeg-color-gray-100: #EFEFEF;
	--egeg-color-surface: #FFFFFF;
	--egeg-color-page: #EFEFEF;
	--egeg-color-panel: #F6F2FF;
	--egeg-color-border: #D9D9D9;

	/* Backward-compatible aliases used by the current CSS. */
	--egeg-purple-500: var(--egeg-color-purple);
	--egeg-purple-400: var(--egeg-color-purple);
	--egeg-purple-300: var(--egeg-color-purple);
	--egeg-purple-200: var(--egeg-color-purple);
	--egeg-purple-100: var(--egeg-color-gray-200);
	--egeg-purple-50: var(--egeg-color-surface);
	--egeg-yellow-500: var(--egeg-color-gray-700);
	--egeg-yellow-400: var(--egeg-color-orange);
	--egeg-yellow-300: var(--egeg-color-orange);
	--egeg-yellow-200: var(--egeg-color-yellow);
	--egeg-yellow-100: var(--egeg-color-yellow-soft);
	--egeg-gray-400: var(--egeg-color-gray-700);
	--egeg-gray-300: var(--egeg-color-gray-500);
	--egeg-gray-200: var(--egeg-color-gray-300);
	--egeg-gray-100: var(--egeg-color-gray-200);
	--egeg-gray-50: var(--egeg-color-gray-100);
	--egeg-border-default: var(--egeg-color-border);
	--egeg-text-secondary: #757575;
	--egeg-white: var(--egeg-color-surface);

	/* 2) TIPOGRAFÍA / ESCALA DESKTOP */
	/* Valores confirmados — overrides del Design Mode promovidos aquí el 2026-06. */
	--egeg-font-family: Archivo, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--egeg-text-display: clamp(24px, 2.1vw, 30px);
	--egeg-text-display-weight: 800;
	--egeg-heading-title-line-height: 1.05;
	--egeg-heading-title-margin-bottom: 8px;
	--egeg-text-shell-subtitle: 16px;
	--egeg-text-shell-subtitle-weight: 400;
	--egeg-text-shell-subtitle-line-height: 1.2;
	--egeg-text-step-title: 16px;
	--egeg-text-step-copy: 16px;
	--egeg-text-stepper-label: 14px;
	--egeg-text-stepper-label-weight: 700;
	--egeg-text-stepper-label-line-height: 1.4;
	--egeg-text-body: 14px;
	--egeg-text-small: 12px;
	--egeg-text-caption: 11px;
	--egeg-text-button: 14px;

	/* Cards de producto */
	--egeg-product-card-title-size: 20px;
	--egeg-product-card-meta-size: 13px;
	--egeg-product-card-copy-size: 12px;
	--egeg-product-card-title-weight: 700;
	--egeg-product-card-meta-weight: 700;
	--egeg-product-card-copy-weight: 500;
	--egeg-card-title-line-height: 1.1;
	--egeg-card-copy-line-height: 1.25;

	/* Cards de medidas */
	--egeg-measure-card-title-size: var(--egeg-type-2xl);
	--egeg-measure-card-meta-size: var(--egeg-type-lg);
	--egeg-measure-card-copy-size: var(--egeg-type-md);
	--egeg-measure-card-title-weight: 800;
	--egeg-measure-card-meta-weight: 700;
	--egeg-measure-card-copy-weight: 500;
	--egeg-measure-card-padding: 24px 24px;
	--egeg-measure-card-min-height: 112px;
	--egeg-measure-card-width: 320px;

	/* Cards de opciones: medidas / modo / arte */
	--egeg-option-card-title-size: clamp(19px, 1.8vw, 23px);
	--egeg-option-card-copy-size: clamp(14px, 1.3vw, 16px);
	--egeg-option-card-title-weight: 700;
	--egeg-option-card-copy-weight: 600;
	--egeg-option-card-icon-size: 28px;
	--egeg-option-card-icon-box: 56px;

	/* Cards compactas: ojales / entrega */
	--egeg-compact-card-title-size: 14px;
	--egeg-compact-card-copy-size: 12px;
	--egeg-compact-card-title-weight: 700;
	--egeg-compact-card-copy-weight: 500;

	/* Upload */
	--egeg-upload-icon-size: 42px;
	--egeg-upload-title-size: clamp(24px, 2.4vw, 32px);
	--egeg-upload-lead-size: clamp(16px, 1.6vw, 20px);
	--egeg-upload-hint-size: 11px;
	--egeg-upload-title-weight: 800;
	--egeg-upload-lead-weight: 700;

	/* Resúmenes */
	--egeg-summary-title-size: 15px;
	--egeg-summary-label-size: 11px;
	--egeg-summary-value-size: 14px;
	--egeg-summary-final-title-size: 18px;
	--egeg-summary-final-body-size: 14px;

	/* 3) ESPACIADO */
	--egeg-space-1: 4px;
	--egeg-space-2: 8px;
	--egeg-space-3: 12px;
	--egeg-space-4: 16px;
	--egeg-space-5: 20px;
	--egeg-space-6: 24px;
	--egeg-space-7: 28px;
	--egeg-space-8: 32px;
	--egeg-shell-padding: clamp(20px, 2.6vw, 34px);
	--egeg-panel-padding: clamp(18px, 2.4vw, 28px);
	--egeg-step-header-padding-y: 14px;
	--egeg-step-header-padding-x: 16px;
	--egeg-step-header-gap: 6px;
	--egeg-stepper-icon-size: 34px;
	--egeg-stepper-icon-font-size: 19px;
	--egeg-stepper-gap: 6px;
	--egeg-stepper-line-height: 4px;
	--egeg-card-padding: 16px;
	--egeg-card-gap: 8px;
	--egeg-shell-gap: 14px;
	--egeg-panel-gap: 14px;
	--egeg-heading-gap: 8px;
	--egeg-product-card-media-height: 154px;
	--egeg-upload-card-padding: 26px;
	--egeg-upload-inner-padding: 34px 28px;
	--egeg-upload-gap: 12px;
	--egeg-editor-padding-left: 8px;
	--egeg-editor-padding-right: 16px;
	--egeg-quick-summary-padding: 16px;
	--egeg-quick-summary-gap: 10px;
	--egeg-quick-summary-item-gap: 6px;

	/* 4) BORDES / RADIOS / SOMBRAS */
	--egeg-stroke-hairline: 1px;
	--egeg-stroke-panel: 1px;
	--egeg-stroke-strong: 2px;
	--egeg-panel-stroke-width: 2px;
	--egeg-summary-item-stroke-width: 1px;
	--egeg-summary-total-stroke-width: 2px;
	--egeg-radius-xs: 6px;
	--egeg-radius-sm: 8px;
	--egeg-radius-md: 12px;
	--egeg-radius-lg: 18px;
	--egeg-radius-xl: 26px;
	--egeg-shadow-shell: 8px 8px 32px rgba(135, 50, 245, 0.18);
	--egeg-shadow-card: 8px 8px 12px rgba(135, 50, 245, 0.14);
	--egeg-shadow-card-selected: 8px 8px 12px rgba(249, 136, 0, 0.20);
	--egeg-shadow-upload: 0 12px 28px rgba(37, 37, 37, 0.08);

	/* 5) BOTONES */
	--egeg-button-height: 44px;
	--egeg-button-radius: 999px;
	--egeg-button-padding-x: 26px;
	--egeg-button-font-weight: 700;
	--egeg-button-icon-size: 18px;
	--egeg-button-icon-box-size: 24px;
	--egeg-button-gap: 8px;
	--egeg-button-line-height: 1;

	/* 6) LÍNEAS TÉCNICAS */
	--egeg-guide-canvas: #A1A1A1;
	--egeg-guide-safe: #245DFF;
	--egeg-guide-cut: #FF3B30;
	--egeg-guide-grommet: #248A3D;

	/* 7) PREVISUALIZACIÓN TÉCNICA / MODAL */
	--egeg-preview-modal-padding: 18px;
	--egeg-preview-modal-max-width: 96vw;
	--egeg-preview-modal-max-height: 96vh;
	--egeg-preview-modal-body-padding: 12px;
	--egeg-preview-svg-max-width: 90vw;
	--egeg-preview-svg-max-height: 82vh;
	--egeg-preview-svg-max-width-flag: 58vw;
	--egeg-preview-svg-max-height-flag: 84vh;
}

@media (max-width: 1280px) {
	.egeg-generator {
		/* TABLET / LAPTOP COMPACTO */
		--egeg-panel-stroke-width: 1.5px;
		--egeg-summary-item-stroke-width: 1px;
		--egeg-summary-total-stroke-width: 1.5px;
		--egeg-text-display: clamp(23px, 2.2vw, 28px);
		--egeg-product-card-title-size: 17px;
		--egeg-product-card-meta-size: 13px;
		--egeg-product-card-copy-size: 12px;
		--egeg-measure-card-title-size: var(--egeg-type-xl);
		--egeg-measure-card-meta-size: var(--egeg-type-md);
		--egeg-option-card-title-size: clamp(18px, 1.7vw, 21px);
		--egeg-option-card-copy-size: clamp(13px, 1.2vw, 15px);
		--egeg-option-card-icon-size: 26px;
		--egeg-option-card-icon-box: 52px;
		--egeg-upload-title-size: clamp(22px, 2.2vw, 28px);
		--egeg-upload-lead-size: clamp(15px, 1.4vw, 18px);
		--egeg-product-card-media-height: 142px;
		--egeg-card-padding: 14px;
		--egeg-preview-svg-max-width: 92vw;
		--egeg-preview-svg-max-height: 82vh;
		--egeg-preview-svg-max-width-flag: 64vw;
	}
}

@media (max-width: 760px) {
	.egeg-generator {
		/* MÓVIL */
		--egeg-panel-stroke-width: 1.25px;
		--egeg-summary-item-stroke-width: 1px;
		--egeg-summary-total-stroke-width: 1.5px;
		--egeg-text-display: 22px;
		--egeg-text-shell-subtitle: 13px;
		--egeg-text-step-title: 15px;
		--egeg-text-step-copy: 12px;
		--egeg-product-card-title-size: 16px;
		--egeg-product-card-meta-size: 12px;
		--egeg-product-card-copy-size: 11px;
		--egeg-measure-card-title-size: var(--egeg-type-xl);
		--egeg-measure-card-meta-size: var(--egeg-type-md);
		--egeg-measure-card-copy-size: 11px;
		--egeg-measure-card-padding: 16px 18px;
		--egeg-measure-card-min-height: 104px;
		--egeg-measure-card-width: 100%;
		--egeg-option-card-title-size: 17px;
		--egeg-option-card-copy-size: 13px;
		--egeg-option-card-icon-size: 24px;
		--egeg-option-card-icon-box: 48px;
		--egeg-compact-card-title-size: 13px;
		--egeg-compact-card-copy-size: 11px;
		--egeg-upload-icon-size: 34px;
		--egeg-upload-title-size: 22px;
		--egeg-upload-lead-size: 15px;
		--egeg-upload-hint-size: 10px;
		--egeg-summary-title-size: 14px;
		--egeg-summary-value-size: 13px;
		--egeg-shell-padding: 18px 12px;
		--egeg-panel-padding: 16px;
		--egeg-card-padding: 13px;
		--egeg-card-gap: 7px;
		--egeg-upload-card-padding: 18px;
		--egeg-upload-inner-padding: 28px 18px;
		--egeg-preview-modal-padding: 10px;
		--egeg-preview-modal-body-padding: 8px;
		--egeg-preview-svg-max-width: 94vw;
		--egeg-preview-svg-max-height: 78vh;
		--egeg-preview-svg-max-width-flag: 82vw;
		--egeg-preview-svg-max-height-flag: 78vh;
	}
}


/* 0.1.36 — valores no tipográficos consolidados aquí; tipografía promovida al bloque principal */
.egeg-theme-root,
.egeg-generator {
	--egeg-measure-card-width: 380px;
	--egeg-measure-card-min-height: 132px;
	--egeg-grommet-card-min-height: 112px;
	--egeg-grommet-card-padding: 18px 20px;
	--egeg-grommet-card-title-size: 15px;
	--egeg-grommet-card-copy-size: 13px;
	--egeg-draft-modal-width: 560px;
	--egeg-draft-modal-body-min-height: 180px;
	--egeg-draft-modal-padding: 16px;
	--egeg-draft-modal-body-padding: 28px 30px;
	--egeg-guide-line-width: 1.25px;
	--egeg-guide-legend-text: 10px;
}

@media (max-width: 1280px) {
	.egeg-generator {
		--egeg-measure-card-width: 360px;
		--egeg-measure-card-min-height: 124px;
		--egeg-measure-card-title-size: var(--egeg-type-xl);
		--egeg-grommet-card-min-height: 106px;
	}
}

@media (max-width: 760px) {
	.egeg-generator {
		--egeg-measure-card-width: 100%;
		--egeg-measure-card-min-height: 116px;
		--egeg-measure-card-padding: 18px 20px;
		--egeg-measure-card-title-size: var(--egeg-type-xl);
		--egeg-measure-card-meta-size: var(--egeg-type-md);
		--egeg-measure-card-copy-size: 12px;
		--egeg-grommet-card-min-height: 96px;
		--egeg-grommet-card-padding: 15px 16px;
		--egeg-grommet-card-title-size: 14px;
		--egeg-grommet-card-copy-size: 12px;
		--egeg-draft-modal-width: 92vw;
		--egeg-draft-modal-body-min-height: 140px;
		--egeg-draft-modal-body-padding: 22px 18px;
	}
}

/* ============================================================
   0.5.60 — DS scale tokens: typography + spacing rhythm
   ------------------------------------------------------------
   Do not chase individual modal/card headings. Components should
   consume these variables. Values are snapped to 4/8 px rhythm
   with a 10px minimum readable text size.
   ============================================================ */
.egeg-theme-root,
.egeg-generator {
	/* Typography scale */
	--egeg-type-min: 10px;
	--egeg-type-2xs: 10px;
	--egeg-type-xs: 12px;
	--egeg-type-sm: 14px;
	--egeg-type-md: 16px;
	--egeg-type-lg: 20px;
	--egeg-type-xl: 24px;
	--egeg-type-2xl: 32px;
	--egeg-line-tight: 1.08;
	--egeg-line-title: 1.14;
	--egeg-line-body: 1.35;

	/* Semantic typography */
	--egeg-font-display: 28px;
	--egeg-font-step-title: 20px;
	--egeg-font-section-title: 20px;
	--egeg-font-component-title: 18px;
	--egeg-font-modal-title: 18px;
	--egeg-font-card-title: var(--egeg-type-lg);
	--egeg-font-card-meta: var(--egeg-type-sm);
	--egeg-font-body: var(--egeg-type-sm);
	--egeg-font-caption: var(--egeg-type-xs);
	--egeg-font-micro: var(--egeg-type-2xs);
	--egeg-font-button: var(--egeg-type-sm);

	/* Spacing scale */
	--egeg-space-0: 0;
	--egeg-space-1: 4px;
	--egeg-space-2: 8px;
	--egeg-space-3: 12px;
	--egeg-space-4: 16px;
	--egeg-space-5: 20px;
	--egeg-space-6: 24px;
	--egeg-space-8: 32px;
	--egeg-space-10: 40px;

	/* Semantic spacing */
	--egeg-pad-shell: var(--egeg-space-8);
	--egeg-pad-panel: var(--egeg-space-6);
	--egeg-pad-card: var(--egeg-space-4);
	--egeg-pad-card-compact: var(--egeg-space-3);
	--egeg-pad-control: var(--egeg-space-3);
	--egeg-pad-modal: var(--egeg-space-6);
	--egeg-pad-modal-body: var(--egeg-space-4);
	--egeg-gap-shell: var(--egeg-space-5);
	--egeg-gap-panel: var(--egeg-space-4);
	--egeg-gap-card: var(--egeg-space-3);
	--egeg-gap-control: var(--egeg-space-2);

	/* Bridge existing component variables to the canonical scale. */
	--egeg-text-display: var(--egeg-font-display);
	--egeg-text-shell-subtitle: var(--egeg-font-body);
	--egeg-text-step-title: var(--egeg-font-step-title);
	--egeg-text-step-copy: var(--egeg-font-body);
	--egeg-text-title: var(--egeg-font-section-title);
	--egeg-text-body: var(--egeg-font-body);
	--egeg-text-small: var(--egeg-font-caption);
	--egeg-text-caption: var(--egeg-font-micro);
	--egeg-text-button: var(--egeg-font-button);
	--egeg-summary-title-size: var(--egeg-font-component-title);
	--egeg-summary-label-size: var(--egeg-font-caption);
	--egeg-summary-value-size: var(--egeg-font-body);
	--egeg-summary-final-title-size: var(--egeg-font-section-title);
	--egeg-summary-final-body-size: var(--egeg-font-body);
	--egeg-product-card-title-size: var(--egeg-font-card-title);
	--egeg-product-card-meta-size: var(--egeg-font-card-meta);
	--egeg-product-card-copy-size: var(--egeg-font-caption);
	--egeg-measure-card-title-size: var(--egeg-type-2xl);
	--egeg-measure-card-meta-size: var(--egeg-type-lg);
	--egeg-measure-card-copy-size: var(--egeg-type-md);
	--egeg-option-card-title-size: var(--egeg-font-component-title);
	--egeg-option-card-copy-size: var(--egeg-font-body);
	--egeg-upload-title-size: var(--egeg-font-step-title);
	--egeg-upload-lead-size: var(--egeg-font-body);
	--egeg-upload-hint-size: var(--egeg-font-micro);
	--egeg-shell-padding: var(--egeg-pad-shell);
	--egeg-panel-padding: var(--egeg-pad-panel);
	--egeg-step-header-padding-y: var(--egeg-space-4);
	--egeg-step-header-padding-x: var(--egeg-space-4);
	--egeg-card-padding: var(--egeg-pad-card);
	--egeg-upload-card-padding: var(--egeg-pad-panel);
	--egeg-upload-inner-padding: var(--egeg-space-8) var(--egeg-space-6);
	--egeg-upload-gap: var(--egeg-gap-card);
	--egeg-preview-modal-padding: var(--egeg-pad-modal);
	--egeg-preview-modal-body-padding: var(--egeg-pad-modal-body);
}

@media (max-width: 1280px) {
	.egeg-generator {
		--egeg-font-display: 26px;
		--egeg-font-step-title: 18px;
		--egeg-font-section-title: 18px;
		--egeg-font-component-title: 18px;
		--egeg-font-modal-title: 18px;
		--egeg-pad-shell: 24px;
		--egeg-pad-panel: 20px;
		--egeg-pad-card: 16px;
		--egeg-pad-modal: 20px;
	}
}

@media (max-width: 760px) {
	.egeg-generator {
		--egeg-font-display: 24px;
		--egeg-font-step-title: 18px;
		--egeg-font-section-title: 18px;
		--egeg-font-component-title: 16px;
		--egeg-font-modal-title: 16px;
		--egeg-font-card-title: 17px;
		--egeg-font-body: 13px;
		--egeg-font-button: 14px;
		--egeg-font-caption: 12px;
		--egeg-font-micro: 10px;
		--egeg-pad-shell: 16px 12px;
		--egeg-pad-panel: 12px;
		--egeg-pad-card: 12px;
		--egeg-pad-card-compact: 8px;
		--egeg-pad-control: 10px;
		--egeg-pad-modal: 12px;
		--egeg-pad-modal-body: 12px;
		--egeg-gap-shell: 12px;
		--egeg-gap-panel: 12px;
		--egeg-gap-card: 8px;
		--egeg-step-header-padding-y: 12px;
		--egeg-step-header-padding-x: 12px;
		--egeg-product-card-media-height: 144px;
		--egeg-option-card-icon-box: 44px;
		--egeg-option-card-icon-size: 22px;
		--egeg-upload-icon-size: 32px;
		--egeg-upload-inner-padding: 20px 12px;
		--egeg-upload-card-padding: 12px;
		--egeg-button-height: 44px;
		--egeg-button-padding-x: 18px;
	}
}

@media (max-width: 420px) {
	.egeg-generator {
		--egeg-font-display: 24px;
		--egeg-font-step-title: 18px;
		--egeg-font-section-title: 18px;
		--egeg-font-component-title: 16px;
		--egeg-font-modal-title: 16px;
		--egeg-font-card-title: 17px;
		--egeg-pad-shell: 12px 10px;
		--egeg-pad-panel: 10px;
		--egeg-pad-card: 10px;
		--egeg-pad-modal: 10px;
		--egeg-pad-modal-body: 10px;
		--egeg-step-header-padding-y: 10px;
		--egeg-step-header-padding-x: 10px;
	}
}



/* ============================================================
   0.5.62 — DS balance pass: desktop readability + mobile restraint
   ------------------------------------------------------------
   Keeps the token contract, but restores upload/card balance on desktop and
   only compresses headings where mobile actually needed it.
   ============================================================ */
.egeg-theme-root,
.egeg-generator {
	--egeg-font-display: 28px;
	--egeg-font-step-title: 20px;
	--egeg-font-section-title: 20px;
	--egeg-font-component-title: 18px;
	--egeg-font-modal-title: 18px;
	--egeg-font-card-title: 18px;
	--egeg-upload-title-size: 20px;
	--egeg-upload-lead-size: 16px;
}

@media (max-width: 1280px) {
	.egeg-generator {
		--egeg-font-display: 26px;
		--egeg-font-step-title: 18px;
		--egeg-font-section-title: 18px;
		--egeg-font-component-title: 18px;
		--egeg-font-modal-title: 18px;
		--egeg-upload-title-size: 18px;
		--egeg-upload-lead-size: 15px;
	}
}

@media (max-width: 760px) {
	.egeg-generator {
		--egeg-font-display: 24px;
		--egeg-font-step-title: 18px;
		--egeg-font-section-title: 18px;
		--egeg-font-component-title: 16px;
		--egeg-font-modal-title: 16px;
		--egeg-font-card-title: 17px;
		--egeg-upload-title-size: 18px;
		--egeg-upload-lead-size: 15px;
	}
}

@media (max-width: 420px) {
	.egeg-generator {
		--egeg-font-display: 22px;
		--egeg-font-step-title: 18px;
		--egeg-font-section-title: 18px;
		--egeg-font-component-title: 16px;
		--egeg-font-modal-title: 16px;
		--egeg-font-card-title: 17px;
		--egeg-upload-title-size: 18px;
		--egeg-upload-lead-size: 14px;
	}
}


/* ============================================================
   0.5.63 — Status total + upload legibility hotfix
   ------------------------------------------------------------
   Keep global headings restrained, but restore enough weight/size to
   the upload action label so “Subir archivo” is not visually lost.
   ============================================================ */
.egeg-theme-root,
.egeg-generator {
	--egeg-upload-title-size: 24px;
	--egeg-upload-lead-size: 17px;
}

@media (max-width: 1280px) {
	.egeg-generator {
		--egeg-upload-title-size: 22px;
		--egeg-upload-lead-size: 16px;
	}
}

@media (max-width: 760px) {
	.egeg-generator {
		--egeg-upload-title-size: 20px;
		--egeg-upload-lead-size: 16px;
	}
}

@media (max-width: 420px) {
	.egeg-generator {
		--egeg-upload-title-size: 20px;
		--egeg-upload-lead-size: 15px;
	}
}


/* ============================================================
   0.5.79 — DS component contract hardening
   ------------------------------------------------------------
   Semantic tokens for states/components. New UI must consume these tokens
   instead of theme colors or one-off hex values.
   ============================================================ */
.egeg-theme-root,
.egeg-generator {
	--egeg-color-ink: #24153F;
	--egeg-color-body: rgba(36, 21, 63, .74);
	--egeg-color-muted: rgba(36, 21, 63, .58);
	--egeg-color-focus-ring: rgba(135, 50, 245, .16);
	--egeg-color-focus-border: var(--egeg-color-purple);
	--egeg-state-ready-bg: #EAF8EF;
	--egeg-state-ready-border: rgba(36, 138, 61, .28);
	--egeg-state-ready-text: #1F7A36;
	--egeg-state-pending-bg: #FFF8E5;
	--egeg-state-pending-border: rgba(249, 136, 0, .32);
	--egeg-state-pending-text: #B75F00;
	--egeg-state-danger-bg: #FFF1F2;
	--egeg-state-danger-border: #FECACA;
	--egeg-state-danger-text: #991B1B;
	--egeg-component-bg: #FFFFFF;
	--egeg-component-bg-soft: #FBF8FF;
	--egeg-component-border: rgba(135, 50, 245, .18);
	--egeg-component-border-strong: rgba(135, 50, 245, .30);
	--egeg-component-radius: 18px;
	--egeg-component-radius-lg: 24px;
	--egeg-component-shadow: 0 18px 40px rgba(36, 21, 63, .08);
	--egeg-control-height: 46px;
	--egeg-control-radius: 16px;
	--egeg-control-border: rgba(135, 50, 245, .24);
	--egeg-control-font-weight: 800;
	--egeg-button-primary-bg: var(--egeg-color-yellow);
	--egeg-button-primary-border: var(--egeg-color-yellow);
	--egeg-button-primary-text: #2E2417;
	--egeg-button-primary-shadow: 0 4px 0 #C9821E;
	--egeg-surface-pill-bg: linear-gradient(135deg, var(--egeg-color-purple), #7A2BE8);
	--egeg-surface-pill-text: #FFFFFF;
	--egeg-surface-pill-border: rgba(255, 255, 255, .72);
}

@media (max-width: 760px) {
	.egeg-generator {
		--egeg-font-display: 20px;
		--egeg-font-step-title: 16px;
		--egeg-font-section-title: 16px;
		--egeg-font-component-title: 15px;
		--egeg-font-modal-title: 16px;
		--egeg-font-card-title: 15px;
		--egeg-font-body: 13px;
		--egeg-text-shell-subtitle: 13px;
		--egeg-upload-title-size: 18px;
		--egeg-upload-lead-size: 14px;
		--egeg-upload-hint-size: 12px;
		--egeg-stepper-icon-size: 34px;
		--egeg-stepper-line-height: 4px;
	}
}

@media (max-width: 420px) {
	.egeg-generator {
		--egeg-font-display: 20px;
		--egeg-font-step-title: 16px;
		--egeg-font-section-title: 16px;
		--egeg-font-component-title: 15px;
		--egeg-font-card-title: 15px;
		--egeg-upload-title-size: 18px;
		--egeg-upload-lead-size: 14px;
	}
}


/* ============================================================
   0.5.80/0.5.164 — DS locations + readable mobile text widths
   ------------------------------------------------------------
   Body copy keeps natural wrapping on mobile; only titles may balance.
   ============================================================ */
.egeg-theme-root,
.egeg-generator {
	--egeg-text-width-heading-mobile: min(100%, 32ch);
	--egeg-text-width-step-title-mobile: min(100%, 26ch);
	--egeg-text-width-body-mobile: min(100%, 56ch);
	--egeg-location-card-bg: #FFFFFF;
	--egeg-location-card-border: rgba(135, 50, 245, .18);
	--egeg-location-card-shadow: 0 14px 30px rgba(36, 21, 63, .07);
}


/* ============================================================
   0.5.133 — QA2 mobile title scale contract
   ------------------------------------------------------------
   Final token owner for mobile headings after the QA1 pass.
   Step titles consume --egeg-font-step-title; only the generator hero
   consumes --egeg-font-display.
   ============================================================ */
@media (max-width: 760px) {
	.egeg-generator {
		--egeg-font-display: 20px;
		--egeg-font-step-title: 16px;
		--egeg-font-section-title: 16px;
		--egeg-font-component-title: 15px;
		--egeg-font-card-title: 15px;
		--egeg-font-body: 13px;
		--egeg-text-step-title: var(--egeg-font-step-title);
		--egeg-summary-final-title-size: var(--egeg-font-section-title);
	}
}