/* ================================================================
   VARIABLES — Design Tokens
   ----------------------------------------------------------------
   Paleta e identidad extraídas 1:1 del kit global de Elementor del
   sitio WordPress original (daehan-v2). Ver daehan.md para el
   detalle de la migración.
   ================================================================ */

:root {
    /* ── Colores ──────────────────────────────────── */
    --color-primary:        #0B5E8A;  /* azul industrial — marca, links, h3 */
    --color-primary-hover:  #094a6e;
    --color-secondary:      #00C0E6;  /* cian — hover de botones, acentos */
    --color-accent:         #00C0E6;

    --color-bg:             #FFFFFF;
    --color-bg-alt:         #EFEFEF;  /* fondo general de secciones claras */
    --color-bg-elevated:    #FFFFFF;
    --color-bg-dark:        #0E2F3F;  /* navy oscuro — footer, overlays, bandas */
    --color-bg-dark-alt:    #12384a;

    --color-text:           #2A2A2A;
    --color-text-muted:     #6B6B6B;  /* 5.3:1 sobre blanco, 4.7:1 sobre bg-alt (WCAG AA) */
    --color-text-inverse:   #FFFFFF;
    --color-text-inverse-muted: rgba(255, 255, 255, 0.72);

    --color-border:         #D3D3D3;
    --color-border-subtle:  #e6e6e6;

    --color-shadow-block:   #1B3738;  /* sombra sólida offset (detalle brutalista) */

    /* ── Tipografía ─────────────────────────────────
       Display: Chakra Petch (peso 500) — headings, con carácter industrial.
       Body: IBM Plex Sans — texto de cuerpo, muy legible a 18px.
    */
    --font-display: "Chakra Petch", sans-serif;
    --font-body:    "IBM Plex Sans", sans-serif;
    --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

    /* Escala tipográfica fluida con clamp() */
    --text-xs:   clamp(0.75rem,  0.7rem  + 0.15vw, 0.875rem);
    --text-sm:   clamp(0.875rem, 0.8rem  + 0.2vw,  1rem);
    --text-base: clamp(1rem,     0.9rem  + 0.3vw,  1.125rem);
    --text-lg:   clamp(1.25rem,  1rem    + 0.5vw,  1.5rem);
    --text-xl:   clamp(1.5rem,   1.2rem  + 0.8vw,  2rem);
    --text-2xl:  clamp(2rem,     1.5rem  + 1.5vw,  3rem);
    --text-hero: clamp(2.5rem,   2rem    + 2vw,    4.5rem);

    /* ── Espaciado ──────────────────────────────────── */
    --space-xs:   0.25rem;  /*  4px */
    --space-sm:   0.5rem;   /*  8px */
    --space-md:   1rem;     /* 16px */
    --space-lg:   1.5rem;   /* 24px */
    --space-xl:   2rem;     /* 32px */
    --space-2xl:  3rem;     /* 48px */
    --space-3xl:  4rem;     /* 64px */
    --space-4xl:  6rem;     /* 96px */

    /* ── Radios ─────────────────────────────────────
       Esquinas asimétricas como detalle recurrente del original
       (ej. 0 0 25px 0), combinadas con radios estándar en cards/botones.
    */
    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:    12px;
    --radius-xl:    16px;
    --radius-2xl:   25px;
    --radius-full:  9999px;
    --radius-asymmetric: 0 0 var(--radius-2xl) 0;

    /* ── Sombras ────────────────────────────────────
       shadow-block: sombra sólida offset, sin blur — detalle de marca.
    */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.16);
    --shadow-block: -10px -10px 0 0 var(--color-shadow-block);
    --shadow-block-sm: -6px -6px 0 0 var(--color-shadow-block);

    /* ── Transiciones ───────────────────────────────── */
    --transition-fast: 150ms ease-out;
    --transition-base: 250ms ease-out;
    --transition-slow: 400ms ease-out;

    /* ── Layout — Contenedores ──────────────────────── */
    --container-sm:  640px;
    --container-md:  768px;
    --container-lg:  1024px;
    --container-xl:  1280px;
    --container-2xl: 1440px;

    /* ── Header ──────────────────────────────────────── */
    --header-height: 88px;

    /* ── Barra fija de contacto (móvil/tablet) ─────────── */
    --mobile-cta-bar-height: 76px;
}


/* ── Prefers reduced motion — accesibilidad ─────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}