/* file: flowtitude.css */

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

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

        /* Contenedor principal */
        --ft-container: var(--container-7xl);
        --ft-padding-content-x: 1rem;
        --ft-padding-content-y: 4rem;

        /* Anchos y columnas */
        --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);

        /* Colores base */
        --ft-color-text: #5d5e5f;
        --ft-color-background: #fafafa;

        /* Tarjetas */
        --ft-card-xs: 12rem;
        --ft-card-sm: 14rem;
        --ft-card-md: 18rem;
        --ft-card-lg: 24rem;
        --ft-card-xl: 36rem;
    
        /* Colores principales */
        --ft-color-primary: #d34d4d;
        --ft-color-secondary: #d29955;

        /* Ejemplo de sombra personalizada */
        --shadow-card: 0 2px 8px 0 rgba(0,0,0,0.08);
        --shadow-section: 0 4px 24px 0 rgba(0,0,0,0.10);
    }
}

@theme {
    /* Fuentes */
    --font-body: 'Montserrat';
    --font-display: 'Montserrat';

    /* Paleta de colores primaria y secundaria */
    --color-primary-50: #c84949;
    --color-primary-100: #be4545;
    --color-primary-200: #b34141;
    --color-primary-300: #a93e3e;
    --color-primary-400: #9e3a3a;
    --color-primary-500: #d34d4d;
    --color-primary-600: #943636;
    --color-primary-700: #893232;
    --color-primary-800: #7f2e2e;
    --color-primary-900: #742a2a;
    --color-primary-950: #6a2727;
      
    --color-secondary-50: #c89151;
    --color-secondary-100: #bd8a4d;
    --color-secondary-200: #b38248;
    --color-secondary-300: #a87a44;
    --color-secondary-400: #9e7340;
    --color-secondary-500: #d29955;
    --color-secondary-600: #936b3c;
    --color-secondary-700: #896337;
    --color-secondary-800: #7e5c33;
    --color-secondary-900: #74542f;
    --color-secondary-950: #694d2b;

     --color-blue-50: #cef8ff;
     --color-blue-100: #8ef2ff;
     --color-blue-200: #03deef;
     --color-blue-300: #02c0cf;
     --color-blue-400: #01a3b0;
     --color-blue-500: #018893;
     --color-blue-600: #016b74;
     --color-blue-700: #005158;
     --color-blue-800: #00393e;
     --color-blue-900: #001f23;
     --color-blue-950: #001416;

    /* Ejemplo de variables para dark mode (puedes sobrescribir en :root[data-theme=dark]) */
    /*
    --ft-color-text: #fafafa;
    --ft-color-background: #232323;
    --shadow-card: 0 2px 8px 0 rgba(0,0,0,0.24);
    */

    --leading-none: 1em;
    --leading-tight: 1.2em;
    --leading-snug: 1.375em;
    --leading-normal: 1.5em;
    --leading-relaxed: 1.625em;
    --leading-loose: 2em; 

    --spacing: 0.25rem;

    --spacing-content-2xs: calc(var(--spacing-content-xs) / var(--ft-space-scale));
    --spacing-content-xs:  calc(var(--spacing-content-sm) / var(--ft-space-scale));
    --spacing-content-sm:  calc(var(--spacing-content-md) / var(--ft-space-scale));
    --spacing-content-md:  calc(var(--ft-space-value) * var(--ft-space-factor));
    --spacing-content-lg:  calc(var(--spacing-content-md) * var(--ft-space-scale));
    --spacing-content-xl:  calc(var(--spacing-content-lg) * var(--ft-space-scale));
    --spacing-content-2xl: calc(var(--spacing-content-xl) * var(--ft-space-scale));
    --spacing-content: var(--spacing-content-xs);

    --spacing-block-sm:   calc(var(--spacing-block) / 1.618);
    --spacing-block: calc(var(--ft-space-value) * 0.666);
    --spacing-block-lg:   calc(var(--spacing-block)  * 1.618);

    --spacing-columns-sm: calc(var(--spacing-columns) / 1.618);
    --spacing-columns: calc(var(--ft-space-value) * 1);
    --spacing-columns-lg: calc(var(--spacing-columns) * 1.618);

    --spacing-section-sm: calc(var(--spacing-section) / 1.618);
    --spacing-section: calc(var(--ft-space-value) * 2.666);
    --spacing-section-lg: calc(var(--spacing-section) * 1.618);


    --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:  0.25rem;
    --radius-card:    0.5rem;
    --radius-section: 1rem;

    --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;   
}