/* file: flowtitude.css */

@layer base {
    :root{
        --ft-text-value: clamp(1rem, 0.9411rem + 0.2299cqi, 1.125rem);
        --ft-text-scale: 1.15;
        --ft-text-factor: 1;

        --ft-space-value: clamp(1.125rem, 0.9483rem + 0.6897cqi, 1.5rem);
        --ft-space-scale: 1.35;
        --ft-space-factor: 1;

        --ft-container: var(--container-7xl);
        --ft-padding-content-x: 1rem;
        --ft-padding-content-y: clamp(calc(var(--spacing-section-lg) * 0.4), 5vw, var(--spacing-section-lg));

        --ft-content-space: min(var(--ft-container), 90%);
        --ft-wide-space: calc(var(--spacing) * 30);
        --ft-mobile-columns: 6;
        --ft-tablet-columns: 8;
        --ft-desktop-columns: 12;
        --ft-gap-content: var(--spacing-columns);

        --ft-color-text: #444f;
        --ft-color-background: #fafafa;

        --ft-card-xs: 12rem;
        --ft-card-sm: 14rem;
        --ft-card-md: 18rem;
        --ft-card-lg: 24rem;
        --ft-card-xl: 36rem;

        /* ============================================================
        BUTTONS
        ============================================================ */

        /* Color de texto por variante */
        --btn-primary-color:   var(--color-neutral-100);
        --btn-secondary-color: var(--color-neutral-100);

        /* Outline: superficie, borde y texto */
        --btn-outline-bg:      transparent;
        --btn-outline-border:  currentColor;
        --btn-outline-color:   var(--color-neutral-800);

        /* Padding en em */
        --btn-py: 1em;
        --btn-px: 1.75em;
    }

    .mask-svg-01 {
        -webkit-mask-image: url('https://flowtitude.com/wp-content/uploads/2025/08/mask-sevice-1-1.svg');
        mask-image: url('https://flowtitude.com/wp-content/uploads/2025/08/mask-sevice-1-1.svg');
        -webkit-mask-size: cover;
        mask-size: cover;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

    .mask-svg-02 {
        -webkit-mask-image: url('https://flowtitude.com/wp-content/uploads/2025/08/mask-sevice-2.2.svg');
        mask-image: url('https://flowtitude.com/wp-content/uploads/2025/08/mask-sevice-2.2.svg');
        -webkit-mask-size: cover;
        mask-size: cover;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

    .mask-svg-03 {
        -webkit-mask-image: url('https://flowtitude.com/wp-content/uploads/2025/08/mask-sevice-3.2.svg');
        mask-image: url('https://flowtitude.com/wp-content/uploads/2025/08/mask-sevice-3.2.svg');
        -webkit-mask-size: cover;
        mask-size: cover;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        filter: drop-shadow(0 0 0 24px var(--color-primary-300));
    }

    .mask-svg-04 {
        -webkit-mask-image: url('https://flowtitude.com/wp-content/uploads/2025/08/mask-sevice-4.2.svg');
        mask-image: url('https://flowtitude.com/wp-content/uploads/2025/08/mask-sevice-4.2.svg');
        -webkit-mask-size: cover;
        mask-size: cover;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        filter: drop-shadow(0 0 0 24px var(--color-primary-300));
    }

    
}

@theme {
    --font-body: 'Poppins';
    --font-georgia: 'Georgia';
    --font-display: 'Clash Display';
    --font-mono: "Liberation Mono", "Courier New", monospace;

    --color-primary-50: #fff7eb;
    --color-primary-100: #fff1db;
    --color-primary-200: #ffe0b3;
    --color-primary-300: #ffcc80;
    --color-primary-400: #ffb647;
    --color-primary-500: #ff9900;
    --color-primary-600: #e68a00;
    --color-primary-700: #c77700;
    --color-primary-800: #a86500;
    --color-primary-900: #7a4900;
    --color-primary-950: #523100;
    
    --color-secondary-50: #f5f5f9;
    --color-secondary-100: #ececf4;
    --color-secondary-200: #dbdbeb;
    --color-secondary-300: #c5c5de;
    --color-secondary-400: #a7a7cd;
    --color-secondary-500: #8888bb;
    --color-secondary-600: #7a7ab3;
    --color-secondary-700: #6a6aaa;
    --color-secondary-800: #575799;
    --color-secondary-900: #3b3b68;
    --color-secondary-950: #2c2c4e;

    --leading-none: 1em;
    --leading-tight: 1.125em;
    --leading-snug: 1.25em;
    --leading-normal: 1.5em;
    --leading-relaxed: 1.625em;
    --leading-loose: 2em; 

    --spacing: 0.25rem;

    /* =====================================================================
           SISTEMA DE ESPACIADO BASE
        ===================================================================== */
    /**
         * Valor base de espaciado responsive
         * Escala de 18px a 24px basada en el viewport
         * Este valor es la base para todo el sistema de espaciado
         */
    --ft-space-value: clamp(1.125rem, 0.9483rem + 0.6897cqi, 1.5rem);
    /**
         * Factor de escalado para espaciado
         * 1.5 = Progresión geométrica que crea jerarquía visual clara
         * Cada nivel es 50% mayor que el anterior
         */
    --ft-space-scale: 1.5;
    /**
         * Multiplicador global de espaciado
         * Permite ajustar todo el espaciado proporcionalmente
         * 1 = espaciado normal, 1.2 = 20% más espacioso, 0.8 = 20% más compacto
         */
    --ft-space-factor: 1;
    /**
         * Variables base para cada contexto de espaciado
         * Estos son los valores semilla que se escalan para crear las familias completas
         */
    /** Espaciado para contenido relacionado (elementos muy cercanos) */
    --spacing-content-base: calc(var(--ft-space-value) * 0.5);
    /* ~9px / ~12px */
    /** Espaciado entre componentes separados */
    --spacing-block-base: calc(var(--ft-space-value) * 0.75);
    /* ~14px / ~18px */
    /** Espaciado para layout horizontal (gaps de grid/flex) */
    --spacing-columns-base: calc(var(--ft-space-value) * 1);
    /* ~18px / ~24px */
    /** Espaciado para separaciones principales (entre secciones) */
    --spacing-section-base: calc(var(--ft-space-value) * 2.5);
    /* ~45px / ~60px */

    /* =========================================================================
       SISTEMA DE ESPACIADO SEMÁNTICO - CORREGIDO
       ========================================================================= */
    /**
     * ESPACIADO PARA CONTENIDO RELACIONADO
     * Para elementos que están estrechamente relacionados entre sí
     * Uso: texto relacionado, elementos de lista, campos de formulario
     */
    --spacing-content-2xs: calc(var(--spacing-content-base) / var(--ft-space-scale) / var(--ft-space-scale));
    /* ~4px / ~5px */
    --spacing-content-xs: calc(var(--spacing-content-base) / var(--ft-space-scale));
    /* ~6px / ~8px */
    --spacing-content-sm: calc(var(--spacing-content-base) / 1.2);
    /* ~7px / ~10px */
    --spacing-content-md: var(--spacing-content-base);
    /* ~9px / ~12px - PUNTO DE PARTIDA */
    --spacing-content-lg: calc(var(--spacing-content-base) * var(--ft-space-scale));
    /* ~14px / ~18px */
    --spacing-content-xl: calc(var(--spacing-content-lg) * var(--ft-space-scale));
    /* ~20px / ~27px */
    --spacing-content-2xl: calc(var(--spacing-content-xl) * var(--ft-space-scale));
    /* ~30px / ~41px */
    --spacing-content: var(--spacing-content-md);
    /* ALIAS para el valor por defecto */
    /**
        * ESPACIADO ENTRE COMPONENTES SEPARADOS
        * Para elementos que están relacionados pero son distintos componentes
        * Uso: entre tarjetas, entre secciones de formulario, entre párrafos
        */
    --spacing-block-2xs: calc(var(--spacing-block-base) / var(--ft-space-scale) / var(--ft-space-scale));
    /* ~6px / ~8px */
    --spacing-block-xs: calc(var(--spacing-block-base) / var(--ft-space-scale));
    /* ~9px / ~12px */
    --spacing-block-sm: calc(var(--spacing-block-base) / 1.2);
    /* ~12px / ~15px */
    --spacing-block-md: var(--spacing-block-base);
    /* ~14px / ~18px - PUNTO DE PARTIDA */
    --spacing-block-lg: calc(var(--spacing-block-base) * var(--ft-space-scale));
    /* ~21px / ~27px */
    --spacing-block-xl: calc(var(--spacing-block-lg) * var(--ft-space-scale));
    /* ~32px / ~41px */
    --spacing-block-2xl: calc(var(--spacing-block-xl) * var(--ft-space-scale));
    /* ~48px / ~61px */
    --spacing-block: var(--spacing-block-md);
    /* ALIAS para el valor por defecto */
    /**
        * ESPACIADO PARA LAYOUT HORIZONTAL
        * Para gaps de grids, flexbox y elementos dispuestos horizontalmente
        * Uso: columnas de grid, elementos de navegación, galerías
        */
    --spacing-columns-2xs: calc(var(--spacing-columns-base) / var(--ft-space-scale) / var(--ft-space-scale));
    /* ~8px / ~11px */
    --spacing-columns-xs: calc(var(--spacing-columns-base) / var(--ft-space-scale));
    /* ~12px / ~16px */
    --spacing-columns-sm: calc(var(--spacing-columns-base) / 1.2);
    /* ~15px / ~20px */
    --spacing-columns-md: var(--spacing-columns-base);
    /* ~18px / ~24px - PUNTO DE PARTIDA */
    --spacing-columns-lg: calc(var(--spacing-columns-base) * var(--ft-space-scale));
    /* ~27px / ~36px */
    --spacing-columns-xl: calc(var(--spacing-columns-lg) * var(--ft-space-scale));
    /* ~41px / ~54px */
    --spacing-columns-2xl: calc(var(--spacing-columns-xl) * var(--ft-space-scale));
    /* ~61px / ~81px */
    --spacing-columns: var(--spacing-columns-md);
    /* ALIAS para el valor por defecto */
    /**
        * ESPACIADO PARA SEPARACIONES PRINCIPALES
        * Para separar secciones importantes del layout
        * Uso: entre header y main, entre secciones de página, margins grandes
        */
    --spacing-section-2xs: calc(var(--spacing-section-base) / var(--ft-space-scale) / var(--ft-space-scale));
    /* ~20px / ~27px */
    --spacing-section-xs: calc(var(--spacing-section-base) / var(--ft-space-scale));
    /* ~30px / ~40px */
    --spacing-section-sm: calc(var(--spacing-section-base) / 1.2);
    /* ~38px / ~50px */
    --spacing-section-md: var(--spacing-section-base);
    /* ~45px / ~60px - PUNTO DE PARTIDA */
    --spacing-section-lg: calc(var(--spacing-section-base) * var(--ft-space-scale));
    /* ~68px / ~90px */
    --spacing-section-xl: calc(var(--spacing-section-lg) * var(--ft-space-scale));
    /* ~101px / ~135px */
    --spacing-section-2xl: calc(var(--spacing-section-xl) * var(--ft-space-scale));
    /* ~152px / ~203px */
    --spacing-section: var(--spacing-section-md);
    /* ALIAS para el valor por defecto */


    --text-xs:  calc(var(--text-sm) / var(--ft-text-scale));
    --text-sm:  calc(var(--text-base) / var(--ft-text-scale));
    --text-base: calc(var(--ft-text-value) * var(--ft-text-factor));
    --text-lg:  calc(var(--text-base) * var(--ft-text-scale));
    --text-xl:  calc(var(--text-lg) * var(--ft-text-scale));
    --text-2xl: calc(var(--text-xl) * var(--ft-text-scale));
    --text-3xl: calc(var(--text-2xl) * var(--ft-text-scale));
    --text-4xl: calc(var(--text-3xl) * var(--ft-text-scale));
    --text-5xl: calc(var(--text-4xl) * var(--ft-text-scale));
    --text-6xl: calc(var(--text-5xl) * var(--ft-text-scale));
    --text-7xl: calc(var(--text-6xl) * var(--ft-text-scale));
    --text-8xl: calc(var(--text-7xl) * var(--ft-text-scale));
    --text-9xl: calc(var(--text-8xl) * var(--ft-text-scale));
    --text-10xl: calc(var(--text-9xl) * var(--ft-text-scale));
    
    --radius-button:  var(--radius-xl);
    --radius-card:    var(--radius-2xl);
    --radius-section: var(--radius-3xl);

    --aspect-rrss: 1.91 / 1;
    --aspect-wide: 18 / 9;
    --aspect-ultrawide: 18 / 5; 
    --aspect-golden: 1.6180 / 1;
    --aspect-portrait: 3 / 4; 
    --aspect-landscape: 4 / 3;   
}