/* Fuente única de valores visuales. Los valores no especificados en el brief
 * son provisionales: consultar docs/design-system.md antes de maquetar páginas. */
:root, .editor-styles-wrapper, .cg-ui {
  --cg-yellow: #E8A72B;
  --cg-pink: #B02A57;
  --cg-forest: #1E3B31;
  --cg-sea: #2B7A6E;
  --cg-terracotta: #C4552F;
  --cg-brass: #B08D4F;
  --cg-cream: #F8F1E4;
  --cg-pastel-pink: #F0C6BC;
  --cg-mint: #A9D2BE;
  --cg-butter: #F6DFA8;
  --cg-sand: #E4D3B0;
  --cg-white: #FFFFFF;
  --cg-font-heading: 'Outfit', sans-serif;
  --cg-font-body: 'Outfit', sans-serif;
  --cg-text-display: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  --cg-text-title: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem);
  --cg-text-section: clamp(1.375rem, 1.2rem + .7vw, 1.625rem);
  --cg-text-body: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --cg-text-caption: .8125rem;
  --cg-weight-display: 800;
  --cg-weight-title: 700;
  --cg-weight-section: 600;
  --cg-weight-body: 400;
  --cg-weight-caption: 500;
  --cg-tracking-display: -.035em;
  --cg-tracking-title: -.02em;
  --cg-tracking-normal: 0;
  --cg-tracking-caption: .2em;
  --cg-line-heading: 1.1;
  --cg-line-body: 1.5;
  --cg-space-1: .25rem;
  --cg-space-2: .5rem;
  --cg-space-3: .75rem;
  --cg-space-4: 1rem;
  --cg-space-5: 1.5rem;
  --cg-space-6: 2rem;
  --cg-space-7: 3rem;
  --cg-radius-control: .75rem;
  --cg-radius-card: 1.5rem;
  --cg-radius-pill: 999px;
  --cg-border: 2px;
  --cg-focus-width: 3px;
  --cg-focus-offset: 4px;
  --cg-shadow-offset: 5px;
  --cg-shadow-active-offset: 2px;
  --cg-press-offset: 3px;
  --cg-shadow-solid: 0 var(--cg-shadow-offset) 0 var(--cg-forest);
  --cg-shadow-pressed: 0 var(--cg-shadow-active-offset) 0 var(--cg-forest);
  --cg-target: 56px;
  --cg-icon: 32px;
  --cg-icon-small: 28px;
  --cg-icon-large: 36px;
  --cg-icon-stroke: 2.5px;
  --cg-card-min: 17rem;
  --cg-image-ratio: 4 / 3;
  --cg-transition: 140ms;
}
/* Fase 3A: medidas de composición de la referencia aprobada. */
:root, .editor-styles-wrapper, .cg-ui {
  --cg-site-max: 1536px;
  --cg-gutter: clamp(1rem, 4.2vw, 4rem);
  --cg-announcement-height: clamp(1.75rem, 2.73vw, 2.625rem);
  --cg-header-height: clamp(4.375rem, 6.8vw, 6.5rem);
  --cg-brand-width: clamp(5.5rem, 8.8vw, 8.5rem);
  --cg-brand-ratio: 1.45;
  --cg-text-nav: clamp(.8125rem, 1vw, 1rem);
  --cg-text-card: 1rem;
  --cg-text-small: .875rem;
  --cg-hero-line: .95;
  --cg-editorial-height: clamp(12.5rem, 20vw, 23rem);
  --cg-card-placeholder-height: clamp(16rem, 25vw, 25rem);
  --cg-collection-gap: clamp(.75rem, 1.25vw, 1.5rem);
  --cg-radius-card: .25rem;
  --cg-card-gap: .5rem;
  --cg-card-image-ratio: 1.75;
  --cg-border-fine: 1px;
  --cg-layer-header: 20;
  --cg-layer-overlay: 30;
  --cg-nav-gap: clamp(.5rem, 1.6vw, 1.5rem);
  --cg-line-editorial: 1.2;
  --cg-line-footer: 1.6;
  --cg-search-width: 25rem;
}

/* Home con fotografía de fondo completa y lettering HTML. */
:root, .editor-styles-wrapper, .cg-ui {
  --cg-logo-ink-ratio: 1121 / 735;
  --cg-logo-canvas-width: 171.543%;
  --cg-logo-canvas-left: -34.166%;
  --cg-logo-canvas-top: -5.85%;
  --cg-font-lettering: var(--cg-font-body);
  --cg-text-lettering: clamp(1.875rem, 3vw, 3.5rem);
  --cg-line-lettering: .95;
  --cg-lettering-angle: -12deg;
  --cg-lettering-width: clamp(8.5rem, 17vw, 17rem);
  --cg-hero-copy: 33%;
  --cg-hero-height: clamp(26rem, 38vw, 38rem);
  --cg-hero-position: 50% 25%;
  --cg-hero-position-tablet: 46% 22%;
  --cg-hero-position-mobile: 58% 18%;
  --cg-hero-mobile-height: 48rem;
  --cg-hero-mobile-veil: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--cg-cream) 80%, transparent) 60%, color-mix(in srgb, var(--cg-cream) 92%, transparent) 100%);
  --cg-lettering-shadow: 0 1px 2px var(--cg-forest);
}

/* Geometría compartida de botones: compacta, sin variar con el ancho. */
:root, .editor-styles-wrapper, .cg-ui {
  --cg-button-height: 44px;
  --cg-button-icon-size: 24px;
  --cg-button-font-size: var(--cg-text-small);
  --cg-button-padding-y: var(--cg-space-2);
  --cg-button-padding-x: var(--cg-space-5);
}

/* Builder typography and shape aliases, shared by canvas and frontend. */
:root, .editor-styles-wrapper, .cg-ui {
  --cg-text-heading-m: 1.375rem;
  --cg-text-heading-s: 1.125rem;
  --cg-text-body-base: 1rem;
  --cg-radius-large: 1.5rem;
}