/* =====================================================================
   DAGNA — DESIGN TOKENS
   Fuente única de verdad para color, tipografía, espaciado, radios,
   sombras y movimiento. Ningún componente debería usar valores
   "sueltos": todo sale de acá.
   Documentación visual: /design-system.html
   ===================================================================== */

:root {
    /* -----------------------------------------------------------------
       1. PALETA DE MARCA (Manual de marca DAGNA)
       ----------------------------------------------------------------- */

    /* Ciruela — color principal */
    --plum-950: #2A1520;   /* extensión: texto sobre menta, fondos profundos */
    --plum-900: #4A2737;   /* extensión: footer */
    --plum-800: #6A394E;   /* marca: primary-accent */
    --plum-700: #784E61;   /* marca: primary-dark */
    --plum-600: #935370;   /* marca: primary-medium */
    --plum-200: #D3BBC6;   /* marca: primary-light */
    --plum-100: #F5D4E3;   /* marca: primary-lighter */
    --plum-50:  #FBF3F6;   /* extensión: superficies suaves */

    /* Menta — color de acento */
    --mint-400: #00FFAE;   /* marca: accent-green-bright */
    --mint-500: #5FDAB3;   /* marca: accent-green */
    --mint-600: #17C18B;   /* marca: accent-green-dark */
    --mint-700: #0B7A57;   /* extensión: menta legible sobre crema (AA) */
    --mint-100: #CDFAE6;   /* marca: accent-green-light */

    /* Neutros */
    --cream:     #FEFCF5;  /* marca: neutral-light */
    --cream-200: #F7F1E8;  /* extensión: superficie alternativa */
    --ink:       #222222;  /* marca: neutral-dark */
    --ink-soft:  #5E4B54;  /* extensión: texto secundario */
    --white:     #FFFFFF;

    /* -----------------------------------------------------------------
       2. COLORES SEMÁNTICOS (usar estos en los componentes)
       ----------------------------------------------------------------- */
    --color-bg:            var(--cream);
    --color-surface:       var(--white);
    --color-surface-alt:   var(--cream-200);
    --color-surface-dark:  var(--plum-800);

    --color-text:          var(--ink);
    --color-text-muted:    var(--ink-soft);
    --color-heading:       var(--plum-800);
    --color-text-inverse:  var(--cream);

    --color-accent:        var(--mint-500);
    --color-accent-hover:  var(--mint-400);
    --color-on-accent:     var(--plum-950);
    --color-accent-text:   var(--mint-700);

    --color-border:        rgba(106, 57, 78, 0.14);
    --color-border-strong: var(--plum-200);
    --color-focus:         var(--mint-600);

    --color-success:       var(--mint-700);
    --color-error:         #B3261E;

    /* Degradados de marca */
    --gradient-plum:    linear-gradient(135deg, var(--plum-700) 0%, var(--plum-800) 60%, var(--plum-900) 100%);
    --gradient-signature: linear-gradient(135deg, var(--mint-500) 0%, var(--mint-600) 45%, var(--plum-700) 100%);
    --gradient-mint:    linear-gradient(135deg, var(--mint-500), var(--mint-600));
    --overlay-hero:     linear-gradient(100deg, rgba(42, 21, 32, 0.82) 0%, rgba(106, 57, 78, 0.62) 45%, rgba(106, 57, 78, 0.12) 100%);
    --overlay-card:     linear-gradient(180deg, rgba(74, 39, 55, 0.08) 0%, rgba(74, 39, 55, 0.55) 38%, rgba(42, 21, 32, 0.94) 100%);
    --overlay-card-hover: linear-gradient(180deg, rgba(23, 193, 139, 0.25) 0%, rgba(42, 21, 32, 0.92) 100%);

    /* -----------------------------------------------------------------
       3. TIPOGRAFÍA — Poppins (familia única de marca)
       Contraste por peso y tamaño, no por familia.
       ----------------------------------------------------------------- */
    --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --fw-light:    300;
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* Escala fluida (mobile → desktop) */
    --fs-display: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
    --fs-h1:      clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
    --fs-h2:      clamp(1.75rem, 1.3rem + 1.9vw, 2.875rem);
    --fs-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
    --fs-h4:      1.125rem;
    --fs-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    --fs-body:    1rem;
    --fs-small:   0.875rem;
    --fs-xs:      0.75rem;

    --lh-tight:   1.1;
    --lh-snug:    1.25;
    --lh-body:    1.65;

    --ls-tight:   -0.025em;
    --ls-normal:  0;
    --ls-wide:    0.14em;  /* eyebrows / etiquetas en mayúscula */

    /* -----------------------------------------------------------------
       4. ESPACIADO — base 4px
       ----------------------------------------------------------------- */
    --space-1:  0.25rem;  /*  4px */
    --space-2:  0.5rem;   /*  8px */
    --space-3:  0.75rem;  /* 12px */
    --space-4:  1rem;     /* 16px */
    --space-5:  1.5rem;   /* 24px */
    --space-6:  2rem;     /* 32px */
    --space-7:  3rem;     /* 48px */
    --space-8:  4rem;     /* 64px */
    --space-9:  6rem;     /* 96px */
    --space-10: 8rem;     /* 128px */

    --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);

    /* -----------------------------------------------------------------
       5. LAYOUT
       ----------------------------------------------------------------- */
    --container:        1240px;
    --container-narrow: 820px;
    --gutter:           clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
    --header-h:         84px;
    --header-h-compact: 68px;

    /* -----------------------------------------------------------------
       6. RADIOS
       ----------------------------------------------------------------- */
    --radius-sm:   8px;
    --radius-md:   14px;
    --radius-lg:   22px;
    --radius-xl:   32px;
    --radius-pill: 999px;

    /* -----------------------------------------------------------------
       7. SOMBRAS (teñidas con ciruela, nunca gris puro)
       ----------------------------------------------------------------- */
    --shadow-xs: 0 1px 2px rgba(74, 39, 55, 0.06);
    --shadow-sm: 0 2px 8px rgba(74, 39, 55, 0.07), 0 1px 2px rgba(74, 39, 55, 0.05);
    --shadow-md: 0 12px 32px -8px rgba(74, 39, 55, 0.18);
    --shadow-lg: 0 28px 60px -16px rgba(74, 39, 55, 0.30);
    --shadow-accent: 0 12px 28px -8px rgba(23, 193, 139, 0.55);

    /* -----------------------------------------------------------------
       8. MOVIMIENTO
       ----------------------------------------------------------------- */
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast:    160ms;
    --dur-base:    280ms;
    --dur-slow:    600ms;
    --dur-slower:  1000ms;

    /* -----------------------------------------------------------------
       9. CAPAS
       ----------------------------------------------------------------- */
    --z-base:    1;
    --z-raised:  10;
    --z-header:  100;
    --z-overlay: 200;
    --z-float:   300;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur-base: 0ms;
        --dur-slow: 0ms;
        --dur-slower: 0ms;
    }
}