/* file: flowtitude.css */

@layer base {
  :root {
    /* Viewport breakpoints */
    --viewport-min: 410px;
    --viewport-max: 1280px;

    /* Base text size */
    --ft-text-min: 1rem;
    --ft-text-max: 1.125rem;
    --ft-text-value: clamp(
      var(--ft-text-min),
      calc(var(--ft-text-min) + (var(--ft-text-max) - var(--ft-text-min)) * (100cqi - 41cqi) / 87cqi),
      var(--ft-text-max)
    );

    /* Scale factor */
    --ft-scale-min: 1.125;
    --ft-scale-max: 1.2;
    --ft-scale-diff: calc(var(--ft-scale-max) - var(--ft-scale-min));
    --ft-text-scale: clamp(
      var(--ft-scale-min),
      calc(var(--ft-scale-min) + var(--ft-scale-diff) * (100vw - var(--viewport-min)) / (var(--viewport-max) - var(--viewport-min))),
      var(--ft-scale-max)
    );

    /* Text factor */
    --ft-text-factor: 1;

  /* Espaciado base - Variables configurables (como textos) */
  --ft-space-min: 0.5rem;
  --ft-space-max: 1.5rem;
  --ft-space-value: clamp(
    var(--ft-space-min),
    calc(var(--ft-space-min) + (var(--ft-space-max) - var(--ft-space-min)) * (100cqi - 41cqi) / 87cqi),
    var(--ft-space-max)
  );
  
  /* Scale factors para escalado (como --ft-text-scale) */
  --ft-space-scale-mob: 1.3;
  --ft-space-scale-desk: 1.5;
  --ft-space-scale-down: 1.35;
  --ft-space-factor: 1;
  
  /* Factores de multiplicación para valores semánticos */
  --ft-space-factor-inner: 0.5;
  --ft-space-factor-content: 1;
  --ft-space-factor-stack: 1;
  --ft-space-factor-block: 1;
  --ft-space-factor-columns: 1;
  --ft-space-factor-section: 2;
  --ft-space-factor-hero: 2.5;

    /* 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); /* Temporal: usar --spacing-columns hasta fase 2 */

    /* Colores base */
    --ft-color-text: #000;
    --ft-color-background: #fff;

    /* 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: 'Montserrat';
  --font-display: 'Montserrat';

  /* Paleta de colores primaria y secundaria */
  --color-secondary-50: #fff9ee;
  --color-secondary-100: #fff5e6;
  --color-secondary-200: #ffecca;
  --color-secondary-300: #ffdf9e;
  --color-secondary-400: #ffd572;
  --color-secondary-500: #ffcb00;
  --color-secondary-600: #c79e00;
  --color-secondary-700: #927300;
  --color-secondary-800: #634d00;
  --color-secondary-900: #352800;
  --color-secondary-950: #1f1600;
  --color-secondary: #ffcb00;

  --color-primary-50: #e9f5ff;
  --color-primary-100: #d8eefe;
  --color-primary-200: #acdefd;
  --color-primary-300: #73cefd;
  --color-primary-400: #28bef4;
  --color-primary-500: #22a8d9;
  --color-primary-600: #1986ad;
  --color-primary-700: #106382;
  --color-primary-800: #074359;
  --color-primary-900: #022533;
  --color-primary-950: #01161f;
  --color-primary: #22a8d9;

  /* Ejemplo de variables para dark mode (puedes sobrescribir en :root[data-theme=dark]) */
  
  --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;

  /* ============================================================
     ESCALA BASE FLUIDA - 6 tamaños calculados desde --ft-space-value
     Prefijo 'fluid' para evitar conflictos y claridad semántica
     ============================================================ */
  
  /* Hacia abajo: dividir por scale-down */
  --spacing-fluid-xs: calc(var(--ft-space-value) / var(--ft-space-scale-down) / var(--ft-space-scale-down));
  --spacing-fluid-sm: calc(var(--ft-space-value) / var(--ft-space-scale-down));
  
  /* Base: valor directo */
  --spacing-fluid-md: calc(var(--ft-space-value) * var(--ft-space-factor));
  
  /* Hacia arriba: multiplicar por escalas mob/desk */
  --spacing-fluid-lg: calc(var(--ft-space-value) * var(--ft-space-scale-mob));
  --spacing-fluid-xl: calc(var(--ft-space-value) * var(--ft-space-scale-mob) * var(--ft-space-scale-desk));
  --spacing-fluid-2xl: calc(var(--ft-space-value) * var(--ft-space-scale-mob) * var(--ft-space-scale-desk) * var(--ft-space-scale-desk));

  /* ============================================================
     VALORES SEMÁNTICOS - Calculados desde escala fluid con factores
     Tailwind v4 genera automáticamente: p-inner, gap-content, etc.
     ============================================================ */
  
  --spacing-inner: calc(var(--spacing-fluid-xs) * var(--ft-space-factor-inner));
  --spacing-content: calc(var(--spacing-fluid-sm) * var(--ft-space-factor-content));
  --spacing-stack: calc(var(--spacing-fluid-sm) * var(--ft-space-factor-stack));
  --spacing-block: calc(var(--spacing-fluid-md) * var(--ft-space-factor-block));
  --spacing-columns: calc(var(--spacing-fluid-md) * var(--ft-space-factor-columns));
  --spacing-section: calc(var(--spacing-fluid-xl) * var(--ft-space-factor-section));
  --spacing-hero: calc(var(--spacing-fluid-2xl) * var(--ft-space-factor-hero));

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

  --radius-button: var(--radus-sm);
  --radius-card: var(--radus-md);
  --radius-section: var(--radus-md);

  --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;
  --aspect-square: 1 / 1;
  --aspect-video: 16 / 9;
}