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

@theme {
    /* Fuentes */
    --font-body: 'Roboto' 'Helvetica', 'Arial', 'sans serif';
    --font-display: 'Anton', 'Helvetica', 'Arial', 'sans-serif';

    /* Paleta de colores primaria y secundaria */
  --color-primary-50: oklch(0.959 0.02 32.59);
  --color-primary-100: oklch(0.919 0.042 32.63);
  --color-primary-200: oklch(0.837 0.09 35.16);
  --color-primary-300: oklch(0.749 0.156 41.11);
  --color-primary-400: oklch(0.666 0.185 45.96);
  --color-primary-500: #000000;
  --color-primary-600: oklch(0.489 0.135 46.1);
  --color-primary-700: oklch(0.408 0.113 46.12);
  --color-primary-800: oklch(0.318 0.088 45.9);
  --color-primary-900: oklch(0.231 0.064 46.94);
  --color-primary-950: oklch(0.182 0.05 46.86);
 
      
    --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;

    /* 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 / 8;
    --aspect-ultrawide: 18 / 5; 
    --aspect-golden: 1.6180 / 1;
    --aspect-portrait: 3 / 4; 
    --aspect-landscape: 4 / 3;   
}