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

@layer base {
  :root {
    /* ============================================================
       1) RANGES / KNOBS (generator inputs)
       ============================================================ */

    /*
      These knobs describe the source scale. The runtime tokens below are a
      generated, flattened snapshot so browsers do not need to resolve chained
      CSS math. If a tool changes the knobs, it must regenerate the final
      --ft-text-* and --ft-spacing-* formulas too.
    */

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

    /* 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: 90%;
    --ft-padding-content-x: 1rem;
    --ft-padding-content-y: var(--spacing-section);
    --ft-padding-content-y-half: 1.3rem;
    --ft-gap-content: var(--spacing-block);

    /* Semantic colors */
    /*
      Los papeles que cubre cualquier pantalla. No son colores nuevos: son
      referencias a la paleta, y decirlo por su papel —superficie, texto,
      apagado, borde, marca— es lo que permite cambiar la paleta sin repasar
      el sitio entero.

      Seis patrones: superficie, texto, borde, marca, accent y estado. Todos
      tienen valor en los dos temas; un papel que solo existe en claro obliga
      a resolverlo a mano en cada componente.
    */

    /* Superficies: la página, lo que se levanta sobre ella, lo que se hunde. */
    --ft-color-surface: var(--color-white);
    --ft-color-surface-2: var(--color-white);
    --ft-color-surface-3: var(--color-secondary-50);

    /* Texto: el normal, el apagado y el que va sobre un fondo oscuro. */
    --ft-color-text: var(--color-secondary-900);
    --ft-color-muted: var(--color-secondary-600);
    --ft-color-text-inverse: var(--color-white);

    --ft-color-border: var(--color-secondary-200);

    /*
      Marca y accent: el color, su estado al pasar por encima y el color que
      se lee ENCIMA de él. El `-contrast` existe para que un botón de marca no
      tenga que adivinar de qué color va su texto.
    */
    --ft-color-brand: var(--color-primary-800);
    --ft-color-brand-hover: var(--color-primary-900);
    --ft-color-brand-contrast: var(--color-white);

    --ft-color-accent: oklch(0.547 0.101 140.2);
    --ft-color-accent-hover: oklch(0.478 0.093 141.5);
    --ft-color-accent-contrast: var(--color-white);

    /*
      Estados. Son papel y no escala: traen su valor puesto y casi nunca se
      tocan, así que once peldaños de cada uno solo engordarían el panel y las
      variables nativas de cada constructor. Si algún día hace falta un
      `bg-success-200`, la escala se añade encima sin romper esto.

      El error NO comparte hue con la marca (27,19): un aviso de error tiene
      que distinguirse de un elemento de marca, así que se va a un rojo más
      frío. Es el flag que el método dejaba abierto.
    */
    --ft-color-info: oklch(0.546 0.245 262.881);
    --ft-color-info-bg: oklch(0.97 0.014 254.604);
    --ft-color-success: oklch(0.627 0.194 149.214);
    --ft-color-success-bg: oklch(0.982 0.018 155.826);
    --ft-color-warning: oklch(0.555 0.163 48.998);
    --ft-color-warning-bg: oklch(0.987 0.022 95.277);
    --ft-color-error: oklch(0.577 0.245 13);
    --ft-color-error-bg: oklch(0.971 0.013 13);

    /* Semantic colors */
    /* --ft-color-background era el nombre anterior de la superficie. */
    --ft-color-background: var(--ft-color-surface);

    /* Semantic typography */
    /*
      Las cuatro familias de texto del sistema. La fuente y el balanceo de
      línea son de la familia entera; el tamaño, el interlineado y el tracking
      son de cada valor, porque un display grande no respira como uno pequeño.
    */

    /* Display: impacto */
    --display-font: var(--font-display);
    --display-weight: 500;
    --display-wrap: balance;
    --display-lg: var(--ft-text-9xl);
    --display-lg-leading: var(--leading-none);
    --display-lg-tracking: var(--tracking-tight);
    --display-md: var(--ft-text-8xl);
    --display-md-leading: var(--leading-none);
    --display-md-tracking: var(--tracking-tight);
    --display-sm: var(--ft-text-7xl);
    --display-sm-leading: var(--leading-none);
    --display-sm-tracking: var(--tracking-tight);

    /* Heading: estructura */
    --heading-font: var(--font-display);
    --heading-weight: 500;
    --heading-wrap: balance;
    --heading-lg: var(--ft-text-6xl);
    --heading-lg-leading: var(--leading-none);
    --heading-lg-tracking: var(--tracking-tight);
    --heading-md: var(--ft-text-5xl);
    --heading-md-leading: var(--leading-none);
    --heading-md-tracking: var(--tracking-tight);
    --heading-sm: var(--ft-text-4xl);
    --heading-sm-leading: var(--leading-none);
    --heading-sm-tracking: var(--tracking-tight);

    /* Subheading: el puente */
    --subheading-font: var(--font-display);
    --subheading-weight: 500;
    --subheading-wrap: pretty;
    --subheading-lg: var(--ft-text-3xl);
    --subheading-lg-leading: var(--leading-tight);
    --subheading-lg-tracking: var(--tracking-normal);
    --subheading-md: var(--ft-text-2xl);
    --subheading-md-leading: var(--leading-tight);
    --subheading-md-tracking: var(--tracking-normal);
    --subheading-sm: var(--ft-text-xl);
    --subheading-sm-leading: var(--leading-tight);
    --subheading-sm-tracking: var(--tracking-normal);

    /* Cuerpo */
    --text-font: var(--font-body);
    --text-wrap: pretty;
    --text-large: var(--ft-text-lg);
    --text-large-leading: var(--leading-snug);
    --text-large-tracking: var(--tracking-normal);
    --text-medium: var(--ft-text-base);
    --text-medium-leading: var(--leading-normal);
    --text-medium-tracking: var(--tracking-normal);
    --text-small: var(--ft-text-sm);
    --text-small-leading: var(--leading-relaxed);
    --text-small-tracking: var(--tracking-normal);

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

    /* ─── Radio y sombra, valor vivo ──────────────────────
       Lo de `@theme` más abajo solo existe si Tailwind compila: sirve para que
       salgan `rounded-md` y `shadow-md`, pero no declara nada por sí solo. Esto
       es lo que hace que los tokens signifiquen algo SIN WindPress delante, que
       es para lo que existía `base/primitives.css` antes de que sus valores se
       mudaran aquí. Mismo patrón que `--ft-text-*`.

       Los papeles van aquí también, y no solo en `@theme`: `components/
       buttons.css` pide `var(--radius-button)`, y sin esta línea el botón se
       queda sin radio en cuanto WindPress no está. */
    --radius-none: 0px;
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    --radius-button: var(--radius-none);
    --radius-card: var(--radius-none);
    --radius-section: var(--radius-none);

    --shadow-none: none;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    --shadow-card: var(--shadow-md);
    --shadow-raised: var(--shadow-lg);

    /* ============================================================
       2) RUNTIME TOKEN FALLBACKS (no calc/clamp required)
       ============================================================ */

    /*
      Text fallbacks mirror Tailwind's default scale. If clamp() is not
      supported, typography behaves like standard Tailwind.
    */
    --ft-text-xs: 0.79rem;
    --ft-text-sm: 0.889rem;
    --ft-text-base: 1rem;
    --ft-text-lg: 1.125rem;
    --ft-text-xl: 1.266rem;
    --ft-text-2xl: 1.424rem;
    --ft-text-3xl: 1.602rem;
    --ft-text-4xl: 1.802rem;
    --ft-text-5xl: 2.027rem;
    --ft-text-6xl: 2.281rem;
    --ft-text-7xl: 2.566rem;
    --ft-text-8xl: 2.887rem;
    --ft-text-9xl: 3.247rem;

    --ft-spacing-fluid-2xs: 0.25rem;
    --ft-spacing-fluid-md: 0.5rem;
    --ft-spacing-fluid-sm: 0.4rem;
    --ft-spacing-fluid-xs: 0.3rem;
    --ft-spacing-fluid-lg: 0.65rem;
    --ft-spacing-fluid-xl: 0.85rem;
    --ft-spacing-fluid-2xl: 1.1rem;

    --ft-spacing-inner: 0.15rem;
    --ft-spacing-content: 0.3rem;
    --ft-spacing-stack: 0.4rem;
    --ft-spacing-block: 0.5rem;
    --ft-spacing-columns: 0.75rem;
    --ft-spacing-section: 2.55rem;
    --ft-spacing-hero: 4.95rem;
  }
}

@layer base {
  /* Static desktop spacing fallback for browsers with weak CSS math support. */
  @media (min-width: 1280px) {
    :root {
      --ft-text-xs: 0.781rem;
      --ft-text-sm: 0.938rem;
      --ft-text-base: 1.125rem;
      --ft-text-lg: 1.35rem;
      --ft-text-xl: 1.62rem;
      --ft-text-2xl: 1.944rem;
      --ft-text-3xl: 2.333rem;
      --ft-text-4xl: 2.799rem;
      --ft-text-5xl: 3.359rem;
      --ft-text-6xl: 4.031rem;
      --ft-text-7xl: 4.837rem;
      --ft-text-8xl: 5.805rem;
      --ft-text-9xl: 6.966rem;

      --ft-spacing-fluid-2xs: 0.45rem;
      --ft-spacing-fluid-md: 1.5rem;
      --ft-spacing-fluid-sm: 1rem;
      --ft-spacing-fluid-xs: 0.65rem;
      --ft-spacing-fluid-lg: 2.25rem;
      --ft-spacing-fluid-xl: 3.4rem;
      --ft-spacing-fluid-2xl: 5.05rem;

      --ft-spacing-inner: 0.35rem;
      --ft-spacing-content: 0.75rem;
      --ft-spacing-stack: 1rem;
      --ft-spacing-block: 1.5rem;
      --ft-spacing-columns: 2.25rem;
      --ft-spacing-section: 10.2rem;
      --ft-spacing-hero: 22.75rem;
      --ft-padding-content-y-half: 5.1rem;
    }
  }

  /*
    Fluid enhancement.
    Public utility tokens stay in @theme; runtime values are flattened here.
    Each token has its own clamp() formula and does not depend on a previous
    scale token, avoiding long var()/calc() dependency chains.
  */
  @supports (font-size: clamp(1rem, calc(1rem + 1vw), 2rem)) {
    :root {
      --ft-text-xs: clamp(0.781rem, calc(0.794rem - 0.017vw), 0.79rem);
      --ft-text-sm: clamp(0.889rem, calc(0.866rem + 0.09vw), 0.938rem);
      --ft-text-base: clamp(1rem, calc(0.941rem + 0.23vw), 1.125rem);
      --ft-text-lg: clamp(1.125rem, calc(1.019rem + 0.414vw), 1.35rem);
      --ft-text-xl: clamp(1.266rem, calc(1.099rem + 0.651vw), 1.62rem);
      --ft-text-2xl: clamp(1.424rem, calc(1.179rem + 0.956vw), 1.944rem);
      --ft-text-3xl: clamp(1.602rem, calc(1.258rem + 1.344vw), 2.333rem);
      --ft-text-4xl: clamp(1.802rem, calc(1.332rem + 1.834vw), 2.799rem);
      --ft-text-5xl: clamp(2.027rem, calc(1.399rem + 2.45vw), 3.359rem);
      --ft-text-6xl: clamp(2.281rem, calc(1.456rem + 3.218vw), 4.031rem);
      --ft-text-7xl: clamp(2.566rem, calc(1.496rem + 4.177vw), 4.837rem);
      --ft-text-8xl: clamp(2.887rem, calc(1.512rem + 5.366vw), 5.805rem);
      --ft-text-9xl: clamp(3.247rem, calc(1.494rem + 6.84vw), 6.966rem);

      --ft-spacing-fluid-2xs: clamp(0.25rem, calc(0.156rem + 0.368vw), 0.45rem);
      --ft-spacing-fluid-md: clamp(0.5rem, calc(0.029rem + 1.839vw), 1.5rem);
      --ft-spacing-fluid-sm: clamp(0.4rem, calc(0.117rem + 1.103vw), 1rem);
      --ft-spacing-fluid-xs: clamp(0.3rem, calc(0.135rem + 0.644vw), 0.65rem);
      --ft-spacing-fluid-lg: clamp(0.65rem, calc(-0.104rem + 2.943vw), 2.25rem);
      --ft-spacing-fluid-xl: clamp(0.85rem, calc(-0.352rem + 4.69vw), 3.4rem);
      --ft-spacing-fluid-2xl: clamp(1.1rem, calc(-0.761rem + 7.264vw), 5.05rem);

      --ft-spacing-inner: clamp(0.15rem, calc(0.056rem + 0.368vw), 0.35rem);
      --ft-spacing-content: clamp(0.3rem, calc(0.088rem + 0.828vw), 0.75rem);
      --ft-spacing-stack: clamp(0.4rem, calc(0.117rem + 1.103vw), 1rem);
      --ft-spacing-block: clamp(0.5rem, calc(0.029rem + 1.839vw), 1.5rem);
      --ft-spacing-columns: clamp(0.75rem, calc(0.043rem + 2.759vw), 2.25rem);
      --ft-spacing-section: clamp(2.55rem, calc(-1.055rem + 14.069vw), 10.2rem);
      --ft-spacing-hero: clamp(4.95rem, calc(-3.439rem + 32.736vw), 22.75rem);
      --ft-padding-content-y-half: clamp(1.3rem, calc(-0.491rem + 6.989vw), 5.1rem);
    }
  }

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

@layer base {
  /*
    Tema oscuro.

    Todo lo que es semántica tiene su valor en los dos temas: un papel que solo
    existe en claro obliga a resolverlo a mano en cada componente. Los tokens
    de la capa de abajo —la paleta, las escalas— no cambian: lo que cambia es
    qué color de la paleta cumple cada papel.
  */
  :root[data-theme="dark"] {
    --ft-color-surface: var(--color-secondary-950);
    --ft-color-surface-2: var(--color-secondary-900);
    --ft-color-surface-3: var(--color-secondary-800);

    --ft-color-text: var(--color-secondary-50);
    --ft-color-muted: var(--color-secondary-400);
    --ft-color-text-inverse: var(--color-secondary-950);

    --ft-color-border: var(--color-secondary-800);

    --ft-color-brand: var(--color-primary-400);
    --ft-color-brand-hover: var(--color-primary-300);
    --ft-color-brand-contrast: var(--color-secondary-950);

    --ft-color-accent: oklch(0.720 0.110 140.2);
    --ft-color-accent-hover: oklch(0.790 0.095 140.2);
    --ft-color-accent-contrast: var(--color-secondary-950);

    --ft-color-info: oklch(0.707 0.165 254.624);
    --ft-color-info-bg: oklch(0.282 0.091 267.935);
    --ft-color-success: oklch(0.792 0.209 151.711);
    --ft-color-success-bg: oklch(0.266 0.065 152.934);
    --ft-color-warning: oklch(0.828 0.189 84.429);
    --ft-color-warning-bg: oklch(0.279 0.077 45.635);
    --ft-color-error: oklch(0.704 0.191 13);
    --ft-color-error-bg: oklch(0.258 0.092 13);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ft-color-surface: var(--color-secondary-950);
      --ft-color-surface-2: var(--color-secondary-900);
      --ft-color-surface-3: var(--color-secondary-800);

      --ft-color-text: var(--color-secondary-50);
      --ft-color-muted: var(--color-secondary-400);
      --ft-color-text-inverse: var(--color-secondary-950);

      --ft-color-border: var(--color-secondary-800);

      --ft-color-brand: var(--color-primary-400);
      --ft-color-brand-hover: var(--color-primary-300);
      --ft-color-brand-contrast: var(--color-secondary-950);

      --ft-color-accent: oklch(0.720 0.110 140.2);
      --ft-color-accent-hover: oklch(0.790 0.095 140.2);
      --ft-color-accent-contrast: var(--color-secondary-950);

      --ft-color-info: oklch(0.707 0.165 254.624);
      --ft-color-info-bg: oklch(0.282 0.091 267.935);
      --ft-color-success: oklch(0.792 0.209 151.711);
      --ft-color-success-bg: oklch(0.266 0.065 152.934);
      --ft-color-warning: oklch(0.828 0.189 84.429);
      --ft-color-warning-bg: oklch(0.279 0.077 45.635);
      --ft-color-error: oklch(0.704 0.191 13);
      --ft-color-error-bg: oklch(0.258 0.092 13);
    }
  }
}

@theme {

    /* Fonts */
    --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    /* Palette - Neutral */
    /*
      El sistema la USA —botones, tarjetas, bordes— pero no la definía: con
      WindPress compilando, Tailwind la ponía por su cuenta y no se notaba;
      sin WindPress, esos colores no resolvían y el botón se quedaba sin su
      color de texto. Los valores son los de Tailwind.
    */
    --color-neutral-50: oklch(98.5% 0 0);
    --color-neutral-100: oklch(97% 0 0);
    --color-neutral-200: oklch(92.2% 0 0);
    --color-neutral-300: oklch(87% 0 0);
    --color-neutral-400: oklch(70.8% 0 0);
    --color-neutral-500: oklch(55.6% 0 0);
    --color-neutral-600: oklch(43.9% 0 0);
    --color-neutral-700: oklch(37.1% 0 0);
    --color-neutral-800: oklch(26.9% 0 0);
    --color-neutral-900: oklch(20.5% 0 0);
    --color-neutral-950: oklch(14.5% 0 0);

    /* Palette - Secondary */
    --color-secondary-50: oklch(0.966 0.005 258.3);
    --color-secondary-100: oklch(0.944 0.008 253.9);
    --color-secondary-200: oklch(0.924 0.009 258.3);
    --color-secondary-300: oklch(0.874 0.016 257.2);
    --color-secondary-400: oklch(0.720 0.022 257.5);
    --color-secondary-500: oklch(0.615 0.026 257.5);
    --color-secondary-600: oklch(0.514 0.029 257.7);
    --color-secondary-700: oklch(0.430 0.034 258.5);
    --color-secondary-800: oklch(0.369 0.038 260.5);
    --color-secondary-900: oklch(0.278 0.034 255.8);
    --color-secondary-950: oklch(0.210 0.028 256.0);

    /* Palette - Primary */
    --color-primary-50: oklch(0.970 0.012 256.5);
    --color-primary-100: oklch(0.935 0.025 256.5);
    --color-primary-200: oklch(0.870 0.045 256.5);
    --color-primary-300: oklch(0.780 0.068 256.5);
    --color-primary-400: oklch(0.660 0.092 256.5);
    --color-primary-500: oklch(0.545 0.105 256.5);
    --color-primary-600: oklch(0.455 0.100 256.5);
    --color-primary-700: oklch(0.385 0.092 256.5);
    --color-primary-800: oklch(0.318 0.082 256.5);
    --color-primary-900: oklch(0.259 0.062 255.5);
    --color-primary-950: oklch(0.205 0.045 255.5);

    /* Flat defaults */
    --color-secondary: var(--color-secondary-500);
    --color-primary: oklch(0.318 0.082 256.5);

    /*
      Blanco. Lo declara Tailwind, pero los papeles de contraste lo usan y sin
      WindPress delante no resolvería: el texto de un botón de marca se
      quedaría sin color. Mismo motivo que la paleta neutral de aquí arriba.
    */
    --color-white: oklch(100% 0 0);

    /* Semantic colors */
    /*
      Los papeles, otra vez, para que WindPress genere sus utilidades:
      bg-surface, text-muted, border-border. El valor vivo NO está aquí —está
      en --ft-color-* dentro de :root, que es lo que remapea el tema oscuro y
      lo único que sigue en pie sin compilar Tailwind. Esto es su gemelo, y va
      detrás del gemelo a propósito: si alguien declara su propio
      --color-surface, se le rompen las utilidades pero no el sistema.

      Mismo patrón que --text-lg: var(--ft-text-lg) más abajo.
    */
    --color-surface: var(--ft-color-surface);
    --color-surface-2: var(--ft-color-surface-2);
    --color-surface-3: var(--ft-color-surface-3);
    --color-text: var(--ft-color-text);
    --color-muted: var(--ft-color-muted);
    --color-text-inverse: var(--ft-color-text-inverse);
    --color-border: var(--ft-color-border);
    --color-brand: var(--ft-color-brand);
    --color-brand-hover: var(--ft-color-brand-hover);
    --color-brand-contrast: var(--ft-color-brand-contrast);
    --color-accent: var(--ft-color-accent);
    --color-accent-hover: var(--ft-color-accent-hover);
    --color-accent-contrast: var(--ft-color-accent-contrast);
    --color-info: var(--ft-color-info);
    --color-info-bg: var(--ft-color-info-bg);
    --color-success: var(--ft-color-success);
    --color-success-bg: var(--ft-color-success-bg);
    --color-warning: var(--ft-color-warning);
    --color-warning-bg: var(--ft-color-warning-bg);
    --color-error: var(--ft-color-error);
    --color-error-bg: var(--ft-color-error-bg);

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

    /* Tracking */
    /*
      Tailwind's own values and names, so tracking-* utilities come out of
      these and a project can use them without learning ours.
    */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    /* Radius */
    /*
      Los valores son los que el sistema venía renderizando de verdad: los
      declaraba `base/primitives.css` en la capa `base`, que va DESPUÉS de
      `theme`, así que ganaba él y lo de aquí no se veía. Ese fichero ya no los
      declara y estos son los que mandan.
    */
    --radius-none: 0px;
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-4xl: 2rem;
    --radius-full: 9999px;

    /* Radius roles */
    --radius-button: var(--radius-none);
    --radius-card: var(--radius-none);
    --radius-section: var(--radius-none);

    /* Sombra */
    /* Mismo caso que el radio: `--shadow-none` y `--shadow-sm` los ponía
       `base/primitives.css` y ganaban. Aquí están sus valores. */
    --shadow-none: none;
    --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

    /* Text shadow */
  --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
  --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
  --text-shadow-sm:
  0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075);
  --text-shadow-md:
  0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1);
  --text-shadow-lg:
  0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1);

    /* Shadow roles */
    --shadow-card: var(--shadow-md);
    --shadow-raised: var(--shadow-lg);

    /* Aspect ratios */
    --aspect-video: 16 / 9;
    --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);

    /* Pairs */
    /*
      Cada tamaño lleva su interlineado y su tracking, como en Tailwind 4:
      un titular a 4xl no puede respirar como un párrafo, y a partir de xl
      el texto pide tracking negativo. Van pegados al tamaño, así que
      `text-4xl` ya sale bien sin acordarse de añadir nada.
    */
    --text-xs--line-height: 1.5;
    --text-xs--letter-spacing: 0em;
    --text-sm--line-height: 1.5;
    --text-sm--letter-spacing: 0em;
    --text-base--line-height: 1.5;
    --text-base--letter-spacing: 0em;
    --text-lg--line-height: 1.45;
    --text-lg--letter-spacing: 0em;
    --text-xl--line-height: 1.4;
    --text-xl--letter-spacing: -0.0125em;
    --text-2xl--line-height: 1.35;
    --text-2xl--letter-spacing: -0.0175em;
    --text-3xl--line-height: 1.25;
    --text-3xl--letter-spacing: -0.02em;
    --text-4xl--line-height: 1.2;
    --text-4xl--letter-spacing: -0.022em;
    --text-5xl--line-height: 1.15;
    --text-5xl--letter-spacing: -0.025em;
    --text-6xl--line-height: 1.1;
    --text-6xl--letter-spacing: -0.025em;
    --text-7xl--line-height: 1.05;
    --text-7xl--letter-spacing: -0.03em;
    --text-8xl--line-height: 1;
    --text-8xl--letter-spacing: -0.03em;
    --text-9xl--line-height: 1;
    --text-9xl--letter-spacing: -0.035em;

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

    --spacing-fluid-2xs: var(--ft-spacing-fluid-2xs);
    --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);
}