/**
 * Flowtitude Design System - Theme Configuration
 * Editado desde Flowtitude → Design System
 */

@layer base {
  :root {
    /* ============================================================
       1) RANGES / KNOBS (configuration only)
       ============================================================ */

    /* Viewport range */
    --viewport-min: 410px;
    --viewport-max: 1460px;

    /* Base typography */
    --ft-text-min: 1rem;
    --ft-text-max: 1.125rem;
    --ft-type-step-min: 1.125;
    --ft-type-step-max: 1.2;
    --ft-text-factor: 1;

    /* Base spacing */
    --ft-space-min: 0.5rem;
    --ft-space-max: 1.5rem;
    --ft-space-step-min: 1.3;
    --ft-space-step-max: 1.5;
    --ft-space-factor: 1;

    /* Semantic spacing multipliers */
    --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: min(var(--container-7xl), 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 */
    --ft-color-text: #616161;
    --ft-color-background: #fff;

    /* Card widths */
    --ft-card-xs: 12rem;
    --ft-card-sm: 14rem;
    --ft-card-md: 18rem;
    --ft-card-lg: 24rem;
    --ft-card-xl: 36rem;

    /* Buttons */
    --btn-primary-color: var(--color-neutral-100);
    --btn-secondary-color: var(--color-neutral-100);
    --btn-outline-bg: transparent;
    --btn-outline-border: currentColor;
    --btn-outline-color: var(--color-neutral-800);
    --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);

    /* Runtime fallbacks consumed by the public @theme tokens. */
    --ft-text-xs: 0.75rem;
    --ft-text-sm: 0.875rem;
    --ft-text-base: 1rem;
    --ft-text-lg: 1.125rem;
    --ft-text-xl: 1.25rem;
    --ft-text-2xl: 1.5rem;
    --ft-text-3xl: 1.875rem;
    --ft-text-4xl: 2.25rem;
    --ft-text-5xl: 3rem;
    --ft-text-6xl: 3.75rem;
    --ft-text-7xl: 4.5rem;
    --ft-text-8xl: 6rem;
    --ft-text-9xl: 8rem;

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

    --ft-spacing-inner: 0.147929rem;
    --ft-spacing-content: 0.288462rem;
    --ft-spacing-stack: 0.384615rem;
    --ft-spacing-block: 0.5rem;
    --ft-spacing-columns: 0.75rem;
    --ft-spacing-section: 2.535rem;
    --ft-spacing-hero: 4.94325rem;
  }
}

@layer base {
  /* Static desktop spacing fallback for browsers with weak CSS math support. */
  @media (min-width: 1280px) {
    :root {
      --ft-spacing-fluid-md: 1.5rem;
      --ft-spacing-fluid-sm: 1rem;
      --ft-spacing-fluid-xs: 0.666667rem;
      --ft-spacing-fluid-lg: 2.25rem;
      --ft-spacing-fluid-xl: 3.375rem;
      --ft-spacing-fluid-2xl: 5.0625rem;

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

  /*
    Fluid enhancement.
    Public utility tokens stay in @theme; runtime values are recalculated here.
  */
  @supports (font-size: clamp(1rem, 2vw, 2rem)) and (font-size: calc(1rem * 1)) and (padding-top: calc(1rem / 2)) {
    :root {
      --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)
      );

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

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

      --ft-spacing-inner: calc(var(--ft-spacing-fluid-xs) * var(--ft-space-factor-inner));
      --ft-spacing-content: calc(var(--ft-spacing-fluid-sm) * var(--ft-space-factor-content));
      --ft-spacing-stack: calc(var(--ft-spacing-fluid-sm) * var(--ft-space-factor-stack));
      --ft-spacing-block: calc(var(--ft-spacing-fluid-md) * var(--ft-space-factor-block));
      --ft-spacing-columns: calc(var(--ft-spacing-fluid-md) * var(--ft-space-factor-columns));
      --ft-spacing-section: calc(var(--ft-spacing-fluid-xl) * var(--ft-space-factor-section));
      --ft-spacing-hero: calc(var(--ft-spacing-fluid-2xl) * var(--ft-space-factor-hero));
    }
  }

  /* Re-enable the bounded container only where CSS min() is supported. */
  @supports (width: min(100%, 1rem)) {
    :root {
      --ft-container: min(var(--container-7xl), 90%);
    }
  }
}

@theme {

    /* Fonts */
    --font-body: Rubik, Helvetica, Arial, sans-serif;
    --font-display: var(--font-body);

    /* Palette - Secondary */
    --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);

    /* Palette - Primary */
    --color-primary-50: oklch(0.9700 0.0159 142.74);
    --color-primary-100: oklch(0.9400 0.0268 142.74);
    --color-primary-200: oklch(0.8700 0.0478 142.74);
    --color-primary-300: oklch(0.8000 0.0660 142.74);
    --color-primary-400: oklch(0.7000 0.0895 142.74);
    --color-primary-500: oklch(0.4338 0.1441 142.74);
    --color-primary-600: oklch(0.4013 0.1408 142.74);
    --color-primary-700: oklch(0.3653 0.1369 142.74);
    --color-primary-800: oklch(0.3167 0.1311 142.74);
    --color-primary-900: oklch(0.2581 0.1233 142.74);
    --color-primary-950: oklch(0.2026 0.1147 142.74);

    /* Flat defaults */
    --color-secondary: var(--color-secondary-500);
    --color-primary: oklch(0.4338 0.1441 142.74);

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

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

    /*
      Typography scale.
      These must live in @theme so Tailwind 4/WindPress generates text-* utilities.
      Runtime values resolve through --ft-text-* fallbacks/fluid tokens.
    */
    --text-xs: var(--ft-text-xs);
    --text-sm: var(--ft-text-sm);
    --text-base: var(--ft-text-base);
    --text-lg: var(--ft-text-lg);
    --text-xl: var(--ft-text-xl);
    --text-2xl: var(--ft-text-2xl);
    --text-3xl: var(--ft-text-3xl);
    --text-4xl: var(--ft-text-4xl);
    --text-5xl: var(--ft-text-5xl);
    --text-6xl: var(--ft-text-6xl);
    --text-7xl: var(--ft-text-7xl);
    --text-8xl: var(--ft-text-8xl);
    --text-9xl: var(--ft-text-9xl);

    /*
      Spacing scale.
      These must live in @theme so Tailwind 4/WindPress generates spacing utilities.
    */
    --spacing: 0.25rem;

    --spacing-fluid-md: var(--ft-spacing-fluid-md);
    --spacing-fluid-sm: var(--ft-spacing-fluid-sm);
    --spacing-fluid-xs: var(--ft-spacing-fluid-xs);
    --spacing-fluid-lg: var(--ft-spacing-fluid-lg);
    --spacing-fluid-xl: var(--ft-spacing-fluid-xl);
    --spacing-fluid-2xl: var(--ft-spacing-fluid-2xl);

    /* Semantic spacing */
    --spacing-inner: var(--ft-spacing-inner);
    --spacing-content: var(--ft-spacing-content);
    --spacing-stack: var(--ft-spacing-stack);
    --spacing-block: var(--ft-spacing-block);
    --spacing-columns: var(--ft-spacing-columns);
    --spacing-section: var(--ft-spacing-section);
    --spacing-hero: var(--ft-spacing-hero);
}