/* file: flowtitude.css */

@layer base {
  :root {
    /* ============================================================
       1) RANGES / KNOBS (configuration only)
       These variables are the "inputs" that define the system.
       ============================================================ */

    /* Viewport range used for fluid interpolation */
    --viewport-min: 410px;
    --viewport-max: 1280px;

    /* Base typography (size range + scaling ratio range) */
    --ft-text-min: 1rem;
    --ft-text-max: 1.125rem;

    --ft-type-step-min: 1.125;
    --ft-type-step-max: 1.0;

    /* Global text multiplier (density / compact mode) */
    --ft-text-factor: 1;

    /* Base spacing (size range + scaling ratio range) */
    --ft-space-min: 0.5rem;
    --ft-space-max: 1.5rem;

    /* Single fluid ratio used to step spacing up/down */
    --ft-space-step-min: 1.3;
    --ft-space-step-max: 1.5;

    /* Global spacing multiplier */
    --ft-space-factor: 1;

    /* Semantic multipliers (used to build meaningful tokens) */
    --ft-space-factor-inner: 0.5;
    --ft-space-factor-content: 0.75;
    --ft-space-factor-stack: 1;
    --ft-space-factor-block: 1;
    --ft-space-factor-columns: 1.5;
    --ft-space-factor-section: 3;
    --ft-space-factor-hero: 4.5;

    /* Layout defaults */
    --ft-container: 90%;
    --ft-padding-content-x: 1rem;
    --ft-padding-content-y: var(--spacing-section);
    --ft-padding-content-y-half: 1.2675rem;
    --ft-gap-content: var(--spacing-block);

    /* Base colors (mapped to fg/bg tokens inside @theme) */
    --ft-color-text: #6b6b6b;
    --ft-color-background: #fff;

    /* Card widths (utility-friendly sizes) */
    --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: 0.6em;
    --btn-px: 1.75em;

    /* ============================================================
   2) DERIVED VALUE FALLBACKS (no calc/clamp required)
   ============================================================ */

--ft-fluid-t: 0;
--ft-text-value: var(--ft-text-min);
--ft-type-step: var(--ft-type-step-min);
--ft-space-value: var(--ft-space-min);
--ft-space-step: var(--ft-space-step-min);
  }
}

@theme {

  /* ============================================================
     FONTS
     ============================================================ */
    --font-body: 'Open Sans' 'Helvetica', 'Arial', 'sans serif';
    --font-display: 'Open Sans', 'Helvetica', 'Arial', 'sans-serif';

    /* ============================================================
       PALETTE (kept as-is)
       Note: pick whether --color-primary should be a real "primary"
       (e.g. 600/700) or a softer default (e.g. 100).
       ============================================================ */
 
  --color-primary-50: oklch(0.955 0.026 227.86);
  --color-primary-100: oklch(0.92 0.049 226.3);
  --color-primary-200: oklch(0.835 0.109 222.28);
  --color-primary-300: oklch(0.748 0.127 220.56);
  --color-primary-400: oklch(0.671 0.114 220.41);
  --color-primary-500: oklch(0.595 0.101 220.13);
  --color-primary-600: oklch(0.503 0.085 219.36);
  --color-primary-700: oklch(0.408 0.069 220.8);
  --color-primary-800: oklch(0.324 0.055 219.91);
  --color-primary-900: oklch(0.23 0.038 218.93);
  --color-primary-950: oklch(0.173 0.03 219.94);

  --color-secondary-50: oklch(0.95 0.069 148.13);
  --color-secondary-100: oklch(0.906 0.136 147.33);
  --color-secondary-200: oklch(0.817 0.184 146.81);
  --color-secondary-300: oklch(0.742 0.167 146.85);
  --color-secondary-400: oklch(0.658 0.148 146.75);
  --color-secondary-500: oklch(0.579 0.13 146.8);
  --color-secondary-600: oklch(0.488 0.11 146.64);
  --color-secondary-700: oklch(0.405 0.091 147.04);
  --color-secondary-800: oklch(0.312 0.071 146.76);
  --color-secondary-900: oklch(0.229 0.052 146.66);
  --color-secondary-950: oklch(0.171 0.038 147.18);

    --color-yuntas-50: #F8F7F6;
    --color-yuntas-100: #F2F0EE;
    --color-yuntas-200: #DDD9D4;
    --color-yuntas-300: #C9C3BB;
    --color-yuntas-400: #A19587;
    --color-yuntas-500: #786854;
    --color-yuntas-600: #6C5E4C;
    --color-yuntas-700: #483E32;
    --color-yuntas-800: #362F26;
    --color-yuntas-900: #241F19;
    --color-yuntas-950: #181511;

    --color-yuntas2-50: #FCFCFA;
    --color-yuntas2-100: #FAF8F5;
    --color-yuntas2-200: #F2EEE7;
    --color-yuntas2-300: #EAE4D8;
    --color-yuntas2-400: #DBCFBA;
    --color-yuntas2-500: #CBBB9D;
    --color-yuntas2-600: #B7A88D;
    --color-yuntas2-700: #7A705E;
    --color-yuntas2-800: #5B5447;
    --color-yuntas2-900: #29251F;
    --color-yuntas2-950: #cbbb9d;


    /* Flat defaults (choose the ones you want as "brand defaults") */
    --color-secondary: var(--color-secondary-500);
    --color-primary: var(--color-primary-500);

    /* ============================================================
       TYPOGRAPHY (leading + sizes)
       ============================================================ */
  
    --leading-none: 1em;
    --leading-tight: 1.2em;
    --leading-snug: 1.375em;
    --leading-normal: 1.5em;
    --leading-relaxed: 1.625em;
    --leading-loose: 2em;

    /* Typography scale (static fallback; fluid override below) */
    --text-base: 1rem;
    --text-sm: 0.888889rem;
    --text-xs: 0.790123rem;
    --text-lg: 1.125rem;
    --text-xl: 1.265625rem;
    --text-2xl: 1.423828rem;
    --text-3xl: 1.601807rem;
    --text-4xl: 1.802032rem;
    --text-5xl: 2.027287rem;
    --text-6xl: 2.280697rem;
    --text-7xl: 2.565785rem;
    --text-8xl: 2.886508rem;
    --text-9xl: 3.247321rem;

    /* Spacing scale */
    --spacing: 0.25rem;

    --spacing-fluid-md: 0.5rem;
    --spacing-fluid-sm: 0.384615rem;
    --spacing-fluid-xs: 0.295858rem;
    --spacing-fluid-lg: 0.65rem;
    --spacing-fluid-xl: 0.845rem;
    --spacing-fluid-2xl: 1.0985rem;

    /* Semantic spacing (static fallback; fluid override below) */
    --spacing-inner: 0.147929rem;
    --spacing-content: 0.288462rem;
    --spacing-stack: 0.384615rem;
    --spacing-block: 0.5rem;
    --spacing-columns: 0.75rem;
    --spacing-section: 2.535rem;
    --spacing-hero: 4.94325rem;
   
   /* ============================================================
      RADIUS 
      ============================================================ */
    --radius-button: var(--radius-sm);
    --radius-card: var(--radius-md);
    --radius-section: var(--radius-md);

    /* ============================================================
       ASPECT RATIOS
       ============================================================ */
    --aspect-rrss: 1.91 / 1;
    --aspect-wide: 18 / 8;
    --aspect-ultrawide: 18 / 5;
    --aspect-golden: 1.618 / 1;
    --aspect-portrait: 3 / 4;
    --aspect-landscape: 4 / 3;
}

@layer base {
  /* Static desktop fallback for browsers with custom properties but weak CSS math support. */
  @media (min-width: 1280px) {
    :root {
      --text-base: 1.125rem;
      --text-sm: 0.9375rem;
      --text-xs: 0.78125rem;
      --text-lg: 1.35rem;
      --text-xl: 1.62rem;
      --text-2xl: 1.944rem;
      --text-3xl: 2.3328rem;
      --text-4xl: 2.79936rem;
      --text-5xl: 3.359232rem;
      --text-6xl: 4.031078rem;
      --text-7xl: 4.837294rem;
      --text-8xl: 5.804753rem;
      --text-9xl: 6.965703rem;

      --spacing-fluid-md: 1.5rem;
      --spacing-fluid-sm: 1rem;
      --spacing-fluid-xs: 0.666667rem;
      --spacing-fluid-lg: 2.25rem;
      --spacing-fluid-xl: 3.375rem;
      --spacing-fluid-2xl: 5.0625rem;

      --spacing-inner: 0.333333rem;
      --spacing-content: 0.75rem;
      --spacing-stack: 1rem;
      --spacing-block: 1.5rem;
      --spacing-columns: 2.25rem;
      --spacing-section: 10.125rem;
      --spacing-hero: 22.78125rem;
      --ft-padding-content-y-half: 5.0625rem;
    }
  }

  /*
    Fluid enhancement.
    Kept behind @supports so browsers that fail calc(), clamp(), division,
    or nested math functions keep the static fallback tokens above.
  */
  @supports (font-size: calc(clamp(1rem, 2vw, 2rem) * 1)) and (padding-top: calc(1rem / 2)) and (width: min(100%, 1rem)) {
    :root {
      --ft-container: min(var(--container-7xl), 90%);
      --ft-padding-content-y-half: calc(var(--ft-padding-content-y) / 2);

      --ft-fluid-t: calc(
        (100vw - var(--viewport-min)) /
        (var(--viewport-max) - var(--viewport-min))
      );

      --ft-text-value: clamp(
        var(--ft-text-min),
        calc(var(--ft-text-min) + (var(--ft-text-max) - var(--ft-text-min)) * var(--ft-fluid-t)),
        var(--ft-text-max)
      );

      --ft-type-step: clamp(
        var(--ft-type-step-min),
        calc(var(--ft-type-step-min) + (var(--ft-type-step-max) - var(--ft-type-step-min)) * var(--ft-fluid-t)),
        var(--ft-type-step-max)
      );

      --ft-space-value: clamp(
        var(--ft-space-min),
        calc(var(--ft-space-min) + (var(--ft-space-max) - var(--ft-space-min)) * var(--ft-fluid-t)),
        var(--ft-space-max)
      );

      --ft-space-step: clamp(
        var(--ft-space-step-min),
        calc(var(--ft-space-step-min) + (var(--ft-space-step-max) - var(--ft-space-step-min)) * var(--ft-fluid-t)),
        var(--ft-space-step-max)
      );

      --text-base: calc(var(--ft-text-value) * var(--ft-text-factor));
      --text-sm: calc(var(--text-base) / var(--ft-type-step));
      --text-xs: calc(var(--text-sm) / var(--ft-type-step));
      --text-lg: calc(var(--text-base) * var(--ft-type-step));
      --text-xl: calc(var(--text-lg) * var(--ft-type-step));
      --text-2xl: calc(var(--text-xl) * var(--ft-type-step));
      --text-3xl: calc(var(--text-2xl) * var(--ft-type-step));
      --text-4xl: calc(var(--text-3xl) * var(--ft-type-step));
      --text-5xl: calc(var(--text-4xl) * var(--ft-type-step));
      --text-6xl: calc(var(--text-5xl) * var(--ft-type-step));
      --text-7xl: calc(var(--text-6xl) * var(--ft-type-step));
      --text-8xl: calc(var(--text-7xl) * var(--ft-type-step));
      --text-9xl: calc(var(--text-8xl) * var(--ft-type-step));

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

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