/**
 * CEMEBA Design Tokens
 *
 * @package Cemeba_Crecienta
 */

:root {
    /* Paleta Cromática Institucional */
    --cmx-teal: #1cba9f;
    --cmx-teal-dark: #159a84;
    --cmx-teal-light: #e6f8f5;
    --cmx-teal-rgb: 28, 186, 159;

    --cmx-blue: #558dca;
    --cmx-blue-dark: #376da6;
    --cmx-blue-light: #edf4fb;
    --cmx-blue-rgb: 85, 141, 202;

    --cmx-navy: #223a66;
    --cmx-navy-dark: #162644;
    --cmx-navy-rgb: 34, 58, 102;

    --cmx-dark: #1e2430;
    --cmx-text: #43475e;
    --cmx-muted: #6b7280;
    --cmx-light: #f8fafc;
    --cmx-border: #e2e8f0;
    --cmx-border-light: #f1f5f9;
    --cmx-white: #ffffff;

    --cmx-wa: #25d366;
    --cmx-wa-hover: #1ebd5a;

    /* Gradientes */
    --cmx-gradient: linear-gradient(90deg, var(--cmx-teal) 0%, var(--cmx-blue) 100%);
    --cmx-gradient-hover: linear-gradient(90deg, var(--cmx-blue) 0%, var(--cmx-teal) 100%);
    --cmx-gradient-alt: linear-gradient(135deg, var(--cmx-navy) 0%, var(--cmx-teal) 100%);
    --cmx-gradient-card: linear-gradient(135deg, #ffffff 0%, #f4fbf9 100%);

    /* Tipografía con clamp() para fluid responsive */
    --cmx-font-heading: 'Exo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cmx-font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --cmx-fs-h1: clamp(2.2rem, 4vw + 1rem, 3.6rem);
    --cmx-fs-h2: clamp(1.75rem, 2.4vw + 0.75rem, 2.5rem);
    --cmx-fs-h3: clamp(1.25rem, 1.4vw + 0.5rem, 1.6rem);
    --cmx-fs-h4: clamp(1.05rem, 0.8vw + 0.4rem, 1.25rem);
    --cmx-fs-body: clamp(0.95rem, 0.3vw + 0.85rem, 1.05rem);
    --cmx-fs-small: 0.875rem;
    --cmx-fs-tiny: 0.78rem;

    --cmx-lh-tight: 1.15;
    --cmx-lh-snug: 1.35;
    --cmx-lh-base: 1.65;

    /* Espaciado */
    --cmx-space-xs: 0.5rem;
    --cmx-space-sm: 1rem;
    --cmx-space-md: 1.5rem;
    --cmx-space-lg: 2.5rem;
    --cmx-space-xl: clamp(3rem, 6vw, 5.5rem);

    /* Layout */
    --cmx-container-max: 1200px;
    --cmx-container-pad: 20px;
    --cmx-navbar-h: 96px;

    /* Radios */
    --cmx-radius-sm: 8px;
    --cmx-radius-md: 14px;
    --cmx-radius-lg: 24px;
    --cmx-radius-pill: 9999px;

    /* Sombras */
    --cmx-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --cmx-shadow-md: 0 8px 24px rgba(34, 58, 102, 0.08);
    --cmx-shadow-lg: 0 16px 40px rgba(34, 58, 102, 0.12);
    --cmx-shadow-hover: 0 20px 40px rgba(28, 186, 159, 0.22);

    /* Transición estándar */
    --cmx-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}