/* 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: min(96rem,90%);
    --ft-padding-content-x: 0;
    --ft-padding-content-y: var(--spacing-section-xl);
    /* 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: #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: 'Syne';
  --font-sans: 'Playfair Display';
  /* Paleta de colores primaria y secundaria */
  --color-secondary-50: oklch(0.969 0.002 18.01);
  --color-secondary-100: oklch(0.927 0.007 17.53);
  --color-secondary-200: oklch(0.862 0.01 17.51);
  --color-secondary-300: oklch(0.786 0.017 17.61);
  --color-secondary-400: oklch(0.719 0.022 17.74);
  --color-secondary-500: oklch(0.64 0.031 18.02);
  --color-secondary-600: oklch(0.569 0.036 18.28);
  --color-secondary-700: oklch(0.493 0.029 18.21);
  --color-secondary-800: oklch(0.42 0.025 18.21);
  --color-secondary-900: oklch(0.292 0.015 18.07);
  --color-secondary-950: oklch(0.23 0.011 18.02);
  --color-secondary: oklch(0.493 0.029 18.21);

  --color-primary-50: oklch(0.959 0.005 275.11);
  --color-primary-100: oklch(0.922 0.01 267.4);
  --color-primary-200: oklch(0.867 0.017 267.8);
  --color-primary-300: oklch(0.805 0.026 268.81);
  --color-primary-400: oklch(0.744 0.033 267.88);
  --color-primary-500: oklch(0.683 0.042 266.34);
  --color-primary-600: oklch(0.618 0.053 266.89);
  --color-primary-700: oklch(0.564 0.061 266.34);
  --color-primary-800: oklch(0.507 0.052 265.68);
  --color-primary-900: oklch(0.447 0.047 267.31);
  --color-primary-950: oklch(0.414 0.042 266.99);
  --color-primary: oklch(0.922 0.01 267.4);

  /* 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-base-multiplier: 0.5;
  --spacing-block-base-multiplier: 0.75;
  --spacing-columns-base-multiplier: 1;
  --spacing-section-base-multiplier: 2.5;
    
  --spacing-content-base: calc(var(--ft-space-value) * var(--spacing-content-base-multiplier));
  --spacing-block-base: calc(var(--ft-space-value) * var(--spacing-block-base-multiplier));
  --spacing-columns-base: calc(var(--ft-space-value) * var(--spacing-columns-base-multiplier));
  --spacing-section-base: calc(var(--ft-space-value) * var(--spacing-section-base-multiplier));
    
  /* Factores de ajuste global para cada escala semántica */
  --spacing-content-factor: 1;
  --spacing-block-factor: 1;
  --spacing-columns-factor: 1;
  --spacing-section-factor: 1;

  /* Content Scale - Para padding interno de componentes */
  /* ORDEN: De menor a mayor según nombre de variable (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl) */
  --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(--spacing-content-base) * var(--spacing-content-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-3xl: calc(var(--spacing-content-2xl) * var(--ft-space-scale));
  --spacing-content-4xl: calc(var(--spacing-content-3xl) * var(--ft-space-scale));
  --spacing-content-5xl: calc(var(--spacing-content-4xl) * var(--ft-space-scale));
  --spacing-content: var(--spacing-content-md);  /* Variable genérica para Content */
      
  /* Block Scale - Para separación entre bloques */
  /* ORDEN: De menor a mayor según nombre de variable (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl) */
  --spacing-block-2xs: calc(var(--spacing-block-xs) / var(--ft-space-scale));
  --spacing-block-xs: calc(var(--spacing-block-sm) / var(--ft-space-scale));
  --spacing-block-sm: calc(var(--spacing-block-md) / var(--ft-space-scale));
  --spacing-block-md: calc(var(--spacing-block-base) * var(--spacing-block-factor));
  --spacing-block-lg: calc(var(--spacing-block-md) * var(--ft-space-scale));
  --spacing-block-xl: calc(var(--spacing-block-lg) * var(--ft-space-scale));
  --spacing-block-2xl: calc(var(--spacing-block-xl) * var(--ft-space-scale));
  --spacing-block-3xl: calc(var(--spacing-block-2xl) * var(--ft-space-scale));
  --spacing-block-4xl: calc(var(--spacing-block-3xl) * var(--ft-space-scale));
  --spacing-block-5xl: calc(var(--spacing-block-4xl) * var(--ft-space-scale));
  --spacing-block: var(--spacing-block-md);  /* Variable genérica para Block */
      
  /* Columns Scale - Para gaps de grid/flex */
  /* ORDEN: De menor a mayor según nombre de variable (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl) */
  --spacing-columns-2xs: calc(var(--spacing-columns-xs) / var(--ft-space-scale));
  --spacing-columns-xs: calc(var(--spacing-columns-sm) / var(--ft-space-scale));
  --spacing-columns-sm: calc(var(--spacing-columns-md) / var(--ft-space-scale));
  --spacing-columns-md: calc(var(--spacing-columns-base) * var(--spacing-columns-factor));
  --spacing-columns-lg: calc(var(--spacing-columns-md) * var(--ft-space-scale));
  --spacing-columns-xl: calc(var(--spacing-columns-lg) * var(--ft-space-scale));
  --spacing-columns-2xl: calc(var(--spacing-columns-xl) * var(--ft-space-scale));
  --spacing-columns-3xl: calc(var(--spacing-columns-2xl) * var(--ft-space-scale));
  --spacing-columns-4xl: calc(var(--spacing-columns-3xl) * var(--ft-space-scale));
  --spacing-columns-5xl: calc(var(--spacing-columns-4xl) * var(--ft-space-scale));
  --spacing-columns: var(--spacing-columns-md);  /* Variable genérica para Columns */
      
  /* Section Scale - Para separación de secciones */
  /* ORDEN: De menor a mayor según nombre de variable (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl) */
  --spacing-section-2xs: calc(var(--spacing-section-xs) / var(--ft-space-scale));
  --spacing-section-xs: calc(var(--spacing-section-sm) / var(--ft-space-scale));
  --spacing-section-sm: calc(var(--spacing-section-md) / var(--ft-space-scale));
  --spacing-section-md: calc(var(--spacing-section-base) * var(--spacing-section-factor));
  --spacing-section-lg: calc(var(--spacing-section-md) * var(--ft-space-scale));
  --spacing-section-xl: calc(var(--spacing-section-lg) * var(--ft-space-scale));
  --spacing-section-2xl: calc(var(--spacing-section-xl) * var(--ft-space-scale));
  --spacing-section-3xl: calc(var(--spacing-section-2xl) * var(--ft-space-scale));
  --spacing-section-4xl: calc(var(--spacing-section-3xl) * var(--ft-space-scale));
  --spacing-section-5xl: calc(var(--spacing-section-4xl) * var(--ft-space-scale));
  --spacing-section: var(--spacing-section-md);  /* Variable genérica para Section */

  --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;
  --radius-none: 0px;
  --radius-sm: 0.125rem;
  --radius-DEFAULT: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;
}