/* Yujju design system — tokens.
   Única fuente de colores, tipografía, espacios, radios y sombras.
   El resto de hojas de assets/css/design/ solo usa estas variables. */

:root {
    /* Color — identidad Yujju */
    --yj-primary: #ac6a6c;          /* rosa de marca */
    --yj-primary-strong: #9a5a5d;   /* fondo de botones: contraste AA con blanco */
    --yj-primary-hover: #84494c;
    --yj-primary-soft: #f4e6e6;     /* fondos suaves de estados activos */
    --yj-accent: #dc9e9f;
    --yj-ink: #1c1317;              /* títulos y footer */
    --yj-text: #3d3236;             /* cuerpo */
    --yj-muted: #7a6e71;            /* metadatos, ayudas */
    --yj-blush: #f8f1ef;            /* superficies de sección */
    --yj-line: #ece3e1;             /* bordes y divisores */
    --yj-line-strong: #d9cbc8;
    --yj-white: #ffffff;
    --yj-success: #3f7d58;
    --yj-danger: #b3403a;

    /* Tipografía */
    --yj-font-display: "Playfair Display", "EB Garamond", Georgia, serif;
    --yj-font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
    --yj-text-xs: 12px;
    --yj-text-sm: 14px;
    --yj-text-md: 16px;
    --yj-text-lg: 18px;
    --yj-h4: 20px;
    --yj-h3: 24px;
    --yj-h2: clamp(28px, 2.4vw + 16px, 40px);
    --yj-h1: clamp(34px, 3vw + 18px, 52px);
    --yj-leading: 1.65;
    --yj-leading-tight: 1.2;
    --yj-tracking-caps: .08em;

    /* Espacios (escala de 4) */
    --yj-space-1: 4px;
    --yj-space-2: 8px;
    --yj-space-3: 12px;
    --yj-space-4: 16px;
    --yj-space-5: 24px;
    --yj-space-6: 32px;
    --yj-space-7: 48px;
    --yj-space-8: 64px;
    --yj-space-9: 96px;
    --yj-section-y: clamp(48px, 6vw, 96px);

    /* Forma */
    --yj-radius-sm: 4px;
    --yj-radius: 8px;
    --yj-radius-pill: 999px;
    --yj-border: 1px solid var(--yj-line);

    /* Elevación: una sola sombra suave, solo para capas flotantes */
    --yj-shadow-float: 0 8px 24px rgba(28, 19, 23, .08), 0 1px 2px rgba(28, 19, 23, .06);

    /* Controles */
    --yj-control-h: 44px;
    --yj-transition: 180ms ease;
}

/* Elementor hereda la misma paleta y tipografía (el kit vive en <body>). */
body.yj-ds[class*="elementor-kit-"] {
    --e-global-color-primary: var(--yj-primary);
    --e-global-color-secondary: var(--yj-accent);
    --e-global-color-text: var(--yj-text);
    --e-global-color-accent: var(--yj-primary-soft);
    --e-global-typography-primary-font-family: "Playfair Display";
    --e-global-typography-primary-font-weight: 500;
    --e-global-typography-secondary-font-family: "Inter";
    --e-global-typography-secondary-font-weight: 400;
    --e-global-typography-text-font-family: "Inter";
    --e-global-typography-text-font-weight: 400;
    --e-global-typography-accent-font-family: "Playfair Display";
    --e-global-typography-accent-font-weight: 500;
}